こんにちは、ともです。

今回はFlutterで動的にWidgetを作成する手順について投稿します。

Widgetを動的に作成する

現在作成しているアプリはLifelogの実績管理アプリです。このアプリでは、仕事、睡眠、勉強、運動といった複数のカテゴリに対して開始と終了の記録を行います。

このカテゴリは将来的に増やす予定です。このため汎用的にカテゴリを増やすことができるようにと今回動的Widgetにしました。

  
List<Widget> categoryWidgets = makeCategoryWidgets(context);
  

複数のWidgetをListに入れて返却するmakeCategoryWidgetsのメソッドを用意しました。

  
  List<Widget;> makeCategoryWidgets(BuildContext context) {
    List<Widget;> categoryWidgets = [];

    List<List<dynami>> _category = [
      ['仕事', Icons.work],
      ['睡眠', Icons.local_hotel],
      ['勉強', Icons.school],
      ['運動', Icons.fitness_center],
    ];

    _category.forEach((Listlt;dynamic> values) {
      categoryWidgets.add(makeCategoryWidget(
        context,
        values[CATEGORY_INDEX_NAME],
        values[CATEGORY_INDEX_ICON],
      ));
    });

    return categoryWidgets;
  }
  

上記のようにカテゴリの名称とアイコンを保持するリスとを用意してforEaceで繰り返し処理を行います。以下のカテゴリを作成するWidgetのメソッドを呼び出してListに追加します。

Widgetの呼び出しを以下のようにしていました。

  
 List<Widget;> categoryWidgets = List<Widget;>;
  

いつの間にかこの記述は非推奨になっていたようです。

  
 List<Widget;> categoryWidgets = [];
  

  
  Widget makeCategoryWidget(
      BuildContext context, String categoryName, IconData icons) {
    return Container(
      child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(icons, color: const Color(0xFF3a74cc), size: 150.0),
            Container(
              child: Row(
                children: <Widget>[
                  makeEventButton(
                    context,
                    categoryName,
                    GoogleCalendarModel.BUTTON_TITLE_START,
                    GoogleCalendarModel.BUTTON_TYPE_START,
                  ),
                  makeEventButton(
                    context,
                    categoryName,
                    GoogleCalendarModel.BUTTON_TITLE_END,
                    GoogleCalendarModel.BUTTON_TYPE_END,
                  ),
                ],
              ),
            ),
          ]),
    );
  }
  

このメソッドはカテゴリ毎に名称とアイコンを受け取ってWidgetを作成します。

WidgetをListに格納することで類似のWidgetを作成することができます。