１人 Flutter Advent Calendar 2019：#5 Flexbox

CSSにはFlexible boxというのがありますが、FlutterColumnとかもこれがベースになっています。
ColumnのParentを見るとFlexだったりすのでわかりやすいです。
https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/basic.dart#L4293

なので、FlexBoxの仕様に従ってデザインを実現して行けば画面サイズがかなり変わったとしてもうまいこと表示できたりもします。

たとえば　http://tinyurl.com/yy55rm3m　こんなレイアウトを作成しようとしたらどうなるでしょうか？　
アイテムごとにalignを変えています。ここで使っているのは、YogaというライブラリのPlaygroundです。YogaはReactNativeとかでも使われているライブラリです。
ここで、FlexBoxのレイアウトを試したりもできます。

Flutterには、FlexというWidgetがあるので、これを利用してみます。
directionを設定して、内部にFlexを入れ子にしてAlignmentを指定することで、上に上げたようなレイアウトが実現できます。

https://github.com/matsuhiro/flex_box_test/blob/master/lib/main.dart#L93-L146

YogaのPlaygroundで表現するとしたらhttp://tinyurl.com/y46o8ksr こんな感じの組み合わせで表現しています。

いまはFlexで実現してみましたが、ColumnはFlexでdirectionを指定した実装になっているので、ColumnとRowの組み合わせでも実現できます。
https://github.com/matsuhiro/flex_box_test/blob/master/lib/main.dart#L148-L198

flexを設定すると以下のように1:2:3のような感じにも出来ます。

https://github.com/matsuhiro/flex_box_test/blob/master/lib/main.dart#L200-L247

flexはFlexクラスには存在しないですがExpandedクラスなどには存在しています。個人的にはFlexクラスの中ですべてを実現できているとわかりやすいのですが、そうするとFlexクラスが巨大になるでしょうし、しかたが無いのかも知れません。

この辺のFlexBoxのレイアウトは、AndroidやiOSのエンジニアよりもWebのfrontendのエンジニアやReactNativeなどを利用していたエンジニアにとっての方が馴染みやすいかもなと感じます。