AndroidエンジニアがFlutterはじめてみた

Androidエンジニアで、Java/Kotlinくらいしか触って来なかったのですが、この度Dart/Flutterに入門してみました。
Flutter公式
そのときに知ったことや理解したこと等を書き記しておこうかなと思います。

対象読者

• Androidのアプリはなんとなく作れる人

SDK Download

https://flutter.dev/docs/get-started/install
まずSDKのDLをしておく。

AndroidStudioで始める

AndroidStudioには、Flutterのプロジェクトを生成するためのものはだいたい入っているらしい。
AndroidStudioのFile > New > New Flutter ProjectでFlutterのProjectは作れる。
また、FlutterPluginもあるので、PluginsからInstallする。
Emulatorや実機がつないであれば、普通のAndroidProjectのようにRunを走らせれば、Hello Worldな画面が出てくる！

コードを見ていく

• pubspec.yamlがbuild.gradleにあたるもの。libraryの追加はそこに記載し、pub getで取ってくる。
• main.dartから始まる。runUp()でMaterialAppを呼び出し。
• MaterialAppがAndroidのApplication相当か。全体のThemeの設定もここでできる。
• build(context)で画面全体を作る。MaterialAppのhomeが最初のページ。
• homeにはWidgetが配置できる。WidgetはUIすべてで、ActivityでもありViewでもある。
• この段階でcodelabsを試せるので、codelabsをやっていくと理解が進みやすいと思う。

Widgetについて

• Widgetは主にStatefulWidgetかStatelesWidgetのどちらかで作られる。
• StatelessWidget
  • 動的に変更がおこらない、静的なビュー。TextやButton等、「一度値を与えたら変更されないView」になります。（ボタンタップ等でText等が変更される画面等ありますが、あれは「Text自体」じゃなくて「Textの親Widget」がStatefulWidgetなので変更ができます）
• StatefulWidgetのReferenceはこちら
  • StatefulWidgetは可変Propertyを持ったStateクラスを定義し、そのPropertyを使ってWidgetを変更していくもの。動的に変更が起こるクラス。
  • StatefulWidgetのStateから親のStatefulWidgetはwidgetとして参照可能。なのでconstructor等での引き渡しは不要。
  • StatefulWidgetのStateを更新した場合は対象のWidgetとその子Viewまで含めて更新されてしまうので、更新が一部のViewだけの場合は、StatelessWidgetを親に、StatefulWidgetを継承したValueListenableBuilder等の一部View単位のStatefulWidgetを活用すると良い。

Widget

Widget Catalog
まずこのカタログ時点で便利

頻出と思われるWidget

• Center
• Row/Column
  • みんな大好きLinearLayoutのようなもの
• Padding
  • Default以外のPaddingつけるときはさらに囲うのびびる
• SizeBox
  • 上下にのみスペースいれたいとかだとこれ
• FutureBuilder:StatefulWidget. Future(非同期処理)の情報をもとに、Viewを更新する。
• ChangeNotifierProvider: ValueNotifierをもとに、Viewを更新する。

いろいろ所感

• ButtonのonPressed()の引数をnullにするとdisableになる。おもしろい。
• Widgetは結構ネストされまくるので適宜メソッドわけないと見づらい。 -　StatefulWidgetのおかげで、Event等でのViewの変更はわりと書きやすいなと感じる -　Viewをコードで書いていくのはAndroidもJetPackComposeが出てきたので多分流行りなんだろうし、なれておくといいと思うう
• enumに値をもたせられないのはちょっと面倒。extensionが増殖する。
• 「このエラー何！？」ってなったらセミコロン抜けてたあるある
• いろんなViewについて検索すると、公式DOCのサンプルコードがブラウザ上で変更可能な状態であるので便利です。

気づいたことがあったらさらに追記して行こうと思います。