Flutterレイアウト入門

Transcript

1. Flutterレイアウト入門 ゆるはち.it(2019/11/28)
 @jalemy

2. 自己紹介 • 佐野友亮(@jalemy)
 ◦ じゃれみーって呼んでください 
 • Unity/C#→なんやかんや→Laravel+Vue.js(今 
 • Flutter良さそうだなと思って勉強中 

3. Flutterとは
4. Flutterとは • Googleが開発しているモバイルアプリケーションフレームワーク 
 • クロスプラットフォーム開発 
 ◦ iOS, Android向けにアプリケーションを作れる 
 ◦ Webアプリも(https://flutter.dev/web)
 ◦ デスクトップアプリも！( https://github.com/flutter/flutter/wiki/Desktop-shells)
 ◦ 将来的にIoTデバイスなど組み込み環境でも実行できるようになるらしい 
 • 言語はDart

5. Dart言語 • Googleが開発している 
 プログラミング言語
 • 初出は2011年
 • JavaScriptの問題点を解決すると 
 言われていた
 • しかし、TypeScriptなどの台頭により 
 一時断念……
 Flutterのfizzbuzz

6. Dart言語 • 2018年にDart2が発表 
 • 続けてFlutterが発表されることで盛り上がる 

7. ちなみにFlutterの動向は？
8. Flutterの実績 • https://flutter.dev/showcase 
 
 • Google Ads
 • Alibaba Group
 • etc……

9. Instagram 　っぽいUIをつくる
10. Widget • FlutterはWidgetと呼ばれるUI部品を組み合わせてレイアウトを作る 
 • 例えば→図だと…… 

11. Scaffold • Scaffoldは “足場” という意味 
 • Material Componentの1つ 
 ◦ (https://api.flutter.dev/flutter/material/Scaffold-class.html)
 • Scaffoldの上にWidgetを重ねることでレイアウトを作るのが基本 

12. Scaffold
13. Scaffold
14. Scaffold • appBar
 ◦ 画面上部にあるタイトルバー 
 • body
 ◦ 文字通りbodyとなる部分 
 ◦ ここにコンテンツを配置する 
 • bottomNavigationBar 
 ◦ 画面下部にあるナビゲーションバー 
 ◦ 各画面への遷移用ボタンを配置したりする 
 • floatingActionButton 
 ◦ 独立したボタン
 ◦ 頻繁に利用する操作のショートカットにしたりする 
 • 他にもプロパティいろいろ…… 

15. Row / Column • RowはX方向、ColumnはY方向にWidgetを並べるためのWidget 
 

16. Material Widgetいろいろ (https://flutter.dev/docs/development/ui/widgets/material)

17. iOSっぽい見た目を作りたい
18. Cupertino Widget (https://flutter.dev/docs/development/ui/widgets/cupertino)

19. Cupertino Widgetサンプル
20. Cupertino Widget
21. iOSとAndroid処理を分けるには？
22. Platform class • dart.io パッケージに Platform class が実装されている (https://api.dartlang.org/stable/2.6.1/dart-io/Platform-class.html)
 • このclassを利用すれば端末のPlatform判定が可能 
 
 
 • プロジェクトごとにラップした処理を作って 
 共通化できれば良さそうだが…… 
 まだ考え中
 
 
 

23. Flutter Studio • ブラウザ上でFlutterのレイアウトを組める 
 便利ツール
 • まだMaterialComponentしか対応してない 
 • ついでに公式のサービスではない 
 
 
 • レイアウトを組んだ上でソースコードを 
 生成できる
 
 
 
 (https://flutterstudio.app/)
24. Flutter Studio 
 
 

25. • Dart
 ◦ JavaScriptとJavaの良いとこ取りした 感じ
 ◦ Flutterと同時に盛り上がっていきそう

26. • Flutter
 ◦ HotReloadめちゃくちゃ便利
 ◦ 提供されているWidgetUIならすぐ作 れる
 ◦ React/Fluxインスパイア
 慣れている人ならすぐ書けそう
 ◦ iOS/Androidが1つのコードで書ける のは強い