Flutter触ってみたのでメモ

2023-02-06

何を学ぶか

友人がなにか新しい言語やりたいね〜という話をしていて、
どうせならということで複数人巻き込んでFlutterに入門することになったので、メモ置き場とする

widgetがUIの設定で、こいつの設定とstateでもってelementが描画されるイメージらしい
padding設定にはPaddingというそのまんまなwidgetがある
Columnでchildrenを縦並べ
- Spacerで余白を調整する。flexっぽい?
状態を持つStatefullWidgetと状態を持たないStatelessWidgetがある
- Stateもclassとして定義し、Widget側のcreateState関数で作ったStateクラスのインスタンスを返す
- State自体もbuild関数を定義することができる
AppBarはheader的なもののようだ
GridViewでGrid表示ができる
ListViewのような動的な要素をColumnのchildrenとして表示する場合、Expandedで囲わないとエラーが出る
- sizeの計算がうまくいかない場合があるようだ

A..B()のような構文がある。カスケード表記 と呼ぶらしい。(cascades notation)
- これを使うと、Aに対する操作が複数ある時、Aを省略できる。メンバ変数への代入とかもできるので初見でびびった
@override
- interfaceの関数をoverloadしているという宣言
const
- finalより強い。コンパイル時に値がわかるものにしか使えない
required
- 必須の引数
名前付き引数がある
folder構成
- 推奨なものはないっぽい。MVVMやRedux（こっちにもあるんだ）など、採用するアーキテクチャによっても変わりそう
testの叩き方
dataはどこに永続化するの
- nativeだとどうなる？
path_provider
- プラットフォームによってアプリのディレクトリが違ってくるから、そういう違いを吸収してくれる
  - osのpathデリミタが違うのを吸収してくれるみたいな話でおもろかった。確かに必要だよな〜
part
- fileを分けるけど、拡張ファイル的な概念。Cのincludeっぽい
package_info_plus
- licenseをまとめて表示してくれる便利package

全体的に書きづらいReactのclassコンポーネントを書いてる気持ちになる
- が、これは普段React+TypeScriptに慣れているからなので当たり前
Reactを参考にしているからか、Reduxがflutterにもあったり、setStateというまんまな関数があったりする
widgetの階層をまたいだときのデータのやり取りどうするの? みたいな課題感はwebフロントと一緒
riverpodはだいぶややこしい書き味に見えたが、最初にreduxを見た人も同じこと思ってそう
- 変更をwatchする書き方がReactと違うだけと思ったらまぁそういうもんかと腹落ちした
- Flutterでも単方向データフロー+immutableなデータを使う、という文化は推奨されている雰囲気
frontではSWRやTanStackQueryのように宣言的に寄せる文化があるが、ネイティブアプリが追従するかは気になる
- 似たような仕組みはありそうだったが深く掘り下げていない
SSR、SSGのような文化は必要ないので、そこで差分が出てきそうだ

FlutterでもSSOTの考え方がある。Reactのstateみたいなのがあるしな
RiverpodはReactのcontext（っぽい）仕組みで、providerを用意してそれを必要なcomponentがwatchする形になっている
- このinterfaceを守ればwatchする側は裏側を知らなくて良い
- firebaseでもなんでもこの仕組みで扱える
見た目はちょっと慣れないと使いづらそうだったので要素振り