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つのコードで書ける のは強い