Flutterで動的にWidgetを作成する時の方法

はじめに

ListViewやPageViewerなどの要素数が動的な場合のUIを作る場合のコーディング方法についてまとめた記事です。

for文を使う方法

引数だけ変えたWidgetを複数個指定する場合にはfor文 (for-each含む) を利用した方が便利です。もちろん、if文も同様に利用可能です。

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        for (int i = 0; i < 10; i++)
          if (i == hogehoge) ...[MyCircleAvatar(true, i)] else CircleAvatar(false, i),
      ],
    );
  }

Listを使う方法

例えば以下のサンプルのように、List型で管理し、必要なWidgetを動的にaddしていけば良いです。

  @override
  Widget build(BuildContext context) {
    var contentWidgets = _makeWidgets();
    return Column(
        mainAxisAlignment: MainAxisAlignment.center, children: contentWidgets);
  }

  List<Widget> _makeWidgets() {
    var contentWidgets = List<Widget>();

    contentWidgets.add(Text('Hello'));
    if (hoge) {
      contentWidgets.add(Padding(
        padding: EdgeInsets.only(top: 10, right: 20, bottom: 30, left: 40),
        child: Text('world'),
      ));
    }

    return contentWidgets;
  }