Flutterでやらないほうが良いこと

2021.1.7
自分への訓戒として。

widgetへの手続き的コード混入

build()は宣言的コードで簡潔に書く。手続き文が混じるとまじでわかんなくなる。イメージとしてはbuild()にはXMLのようなノリでwidgetをネストし記述していく。

xな例、手続き的に書く場合

Widget build(context) {
  final children = <Widget>[
    Text("the condition is..")
  ];
  bool condition = false;
  if (_hoge != null) {
    condition = true;
  }
  if (condition) {
    children.add(Text("yes"));
  }
  return Column(children: children);
}

宣言的に書く

Widget build(context) {
  bool condition = (_hoge != null);
  return Column(children: [
    Text("the condition is.."),
    if (condition)
      Text("yes")
  ]);
}

Atomic Designによる過度な分割

再利用のあてがなければ分割しない。PageとTemplateを最低限分けとけば良い。

page/templateの役割分担例

class SomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(body: SafeArea(child: SomeTemplate(
      onTap: () { print("tapped"); },
      btnLabelStr: "ボタン",
     )));
  }
}

class SomeTemplate extends StatelessWidget {
  final Function onTap;
  final String btnLabelStr;
  SomeTemplate({this.onTap, this.btnLabelStr});
  
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(child: Text(btnLabelStr), onPressed: onTap)
    );
  }
}

構成要素が多くてFat templateになる場合は、template内で分割する。他で利用するあても無いのにorganism/moleculeなどに分離しない。

some_template.dart
some_template_part_header.dart
some_template_part_footer.dart

Provider

特別な事情がない限りriverpodを使う。Providerの方が枯れてるからという理由でriverpodを避けない。Provider Widgetの注入でConsumerとかSelectorとかわけわかんなくなる、インスペクト難しくなる。hookは判断保留。rxdart、blocはパスした（redux恐怖症）。

継承,インターフェイスは使わない

定形の継承（StatelessWidgetとかChangeNotifierとか）以外は使わないようにする。mixin使う。グローバル関数を検討する。最後の最後の手段として継承、インターフェイスを検討する。特にWidgetの継承は絶対にNG。宣言的コードともAtomicDesignとも合わないので。

---

あとがき

すべてを通してひとつのことを言っている。Widgetを宣言的に記述し、そのファイルのコードを見るだけで内容把握できるよう努める。あとformatterは必須。