FlutterのWidgetについて勉強を始める

FlutterのUI作成の特徴

画面を表示

• すべてコードで書く
• Widgetの構成単位が細かい
• AndroidでいうところのLayoutに当たるものがほとんど。
• StatelessWidgetとStateWidgetがある
  • まだ理解していない
• Androidでいうところのlayout_gravityやgravityもWidgetとして提供されている
• とてもシンプルなデコレーションパターンな印象
• それ故にコード量は多い
• しかし、それを補って余りある強力なUI表現が得られる
• UIをコードに落とし込むときも単純な考え方で記述できるので苦労しなさそう
• Androidでよくある「え、標準UIでこれができないの？」がほとんどない気がする
  • Androidの標準のViewは機能が豊富過ぎるわりに必要な機能を網羅できていなくて使いにくかった

画像を表示

• ローカルで表示する場合
  • Image.asset(<画像のパス>)で表示
  • プロジェクト直下にディレクトリを作成。名前はなんでもOK
  • 表示したい画像が入ったディレクトリはpubspec.yamlに記載
  • ディレクトリだけでなくファイルも指定可能

flutter:
  assets:
    - assets/ # ディレクトリ指定
    - assets/images/image.jpg

• ネットワーク経由で表示する場合
  • Image.network()で表示できる
• よくある角丸はClipRRect Widgetの子に指定することで簡単に
  • Androidだと自前かサードパーティーのライブラリが必要だった

リスト表示

ListView.builder(
  itemBuilder: (buildContext, index) => Text("current $index"),
  itemCount: 10,
)

• 書き方はRecyclerViewととても似ている。