Flutterレイアウト入門

E976fa2ecdb59d24be374c953fe56e2f?s=47 jalemy
November 28, 2019

 Flutterレイアウト入門

E976fa2ecdb59d24be374c953fe56e2f?s=128

jalemy

November 28, 2019
Tweet

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