Flutter、最近よく聞くようになってきました。マテリアルデザインっぽいアプリならサクッと作れると評判のやつです。
Flutter、サンプルコードがまぁまぁムズい
New Project... でFlutterプロジェクト作って最初の、FABクリックでカウントアップするやつ、まぁまぁムズいです。
読んでも動きがわからないとかそういうムズさではなく、どうにもこうにも次の一歩が踏み出せない感がある"ムズい"です。
なにがムズいのか
StatefulWidget。こいつがいきなり出てくるところかなと思っています。
HTML知らないのにJSいきなり教えられた(・o・)ポカーン な感じｗ
HTML画面の作り方を知った上で、動的なものを作りたくてJSを学ぶのがスーッと入っていけるのと同じで、FlutterもまずはStatelessWidgetで画面の作り方を知った上で、動的なものを作るところでStatefulWidgetを使えばいいんじゃないの？って感じました。
ということで、、作りたい画面があるなら作ればいいのだ！
静的な画面をつくるだけなら、StatefulWidgetの理解なく進められます。
「最近、よく読んでる https://home.livingfk.com/ ページ、もうちょっとスマホUIで読めたら最高なのになー」からの、Flutterトレースを始めてみました。
StatelessWidgetでガンガン作っていくと結構楽しいです。
この２つのページと、あとはぐぐりながらやると、だいたいの画面は作れます。まだまだ途中だけどいったんリポジトリに上げてみました。
ネイティブ実装に比べてFlutterがラクなこと
マテリアルデザイン
まずスタイル定義が超ラクです。
あとは、ドロワーやアクションバー、ボタンやカードやDividerなど、一通りウィジェットが揃ってるのも本当にラクです。
最近は https://github.com/material-components/material-components はFlutterが一番先行してますよね。Androidですら未実装なのにFlutterは実装済み、とか結構あります。StepperとかBackdropとか。
ドロワーとかアクションバーのメニューとか
ネイティブだとJavaでコードを書かないとDrawerToggleが出ないとかオプションメニューが出ないとかありますよね。
FlutterだとScaffold使えば、
- Drawerを定義するだけで自動でDrawerToggleつけてくれたり
- AppBarにactionsって定義するだけでアクションバーのメニューをつけてくれたり
結構ボイラープレートコードっぽいものが省力化できてる感あります。
レイアウトの反映が一瞬
ネイティブだと、レイアウトXML変えたらビルドし直してまぁまぁ待たされますが、Flutterだとホットリロードで２秒くらいで結果が見れる。レイアウトの勉強には最高の利点です。
NetworkImageがライブラリなく使える
ネイティブだとGlideとかPicassoに頼ってContext渡して・・・とかいろいろ面倒なところ。
Flutterだと Image.network("https://xxxx.xx.xx/hogehoge.png") みたいなのがサラッと書けて、画像もWebページ表示するみたいに難なく非同期表示されるのはめちゃくちゃ便利です。
Webでは簡単だけどFlutterだと難しそうなこと
widthは画面の横幅100%、縦横比4:3のImage
Webだと簡単にできるんだと思いますが、Flutterだと幅を計算した後に高さを指定ってのがどうもうまくできませんでした。
PageView など事前に高さがわかってないと使えないウィジェットもあったりするけど、みんなどうやって解決してるんだろう・・・
NetworkImageを表示するカルーセル
PageViewの高さが事前にわかってないといけない制約です。はい。
画面にあわせて画像の方を加工せよ（あんまり縦横比が違いすぎる画像をまぜるな）ってことなんでしょうけど・・・
（ちなみにこれはネイティブでも同じことが言えるのでFlutterだから悪いとかそういうことではない）
まとめ
counterのサンプルアプリをみて「で、次なにからやればいいんだ・・・」ってなってる人は、ぜひWebページのトレースをやるといいです。楽しいよ。
