【Flutter/Dart】スプレッド演算子(…)を使ってWidgetを動的に自動生成する

今回はDartにおけるスプレッド演算子を用いてFlutterのWidgetを自動生成する方法を解説します。

画面に表示したいWidget数が前もって決まっていなくて動的に記述したい場合にはよく使う手法なのでぜひ覚えてみてください。

Widgetについて詳しく知りたい方は「【Flutter】UI構築する際の基本、Widgetついて解説!【サンプルコードあり】」で解説しているので良ければ参考にしてみてください。

【Flutter】UI構築する際の基本、Widgetついて解説!【サンプルコードあり】

スプレッド演算子とは

スプレッド演算子(「…」)とは、端的に言えばデータにデータを結合する場合に使われるオペレータです。

Dart以外の言語にも存在するオペレータなのですが、他の言語と違う特徴として、Dartには「nullsafety対応版」のスプレッド演算子も存在します。

nullsafety対応のスプレッド演算子は「…」の後ろに「?」をつけるので覚えておきましょう。

基本的な使い方の例は下記です。

dart
// リストにリストを結合する
var foo = [1, 2, 3];
var bar = [0, ...foo];
print(bar);
// [0, 1, 2, 3]
  
// 結合するデータがNullかもしれない時はnullsafety対応のスプレッド演算子を使う事でエラーを回避できる
var foo2;
var bar2 = [0, ...?foo2];
print(bar2);
// [0]

// データを複製
var foo3 = [0, 1, 2, 3];
var bar3 = [...foo3];
print(bar3);
// [0, 1, 2, 3]

このスプレッド演算子を使うことでWidgetを動的に生成してみようというのが今回の内容です。

実装

実装方法は簡単で、ColumnやStackなどのchildrenプロパティの中でfor文を書いてその中で自動生成したいWidgetを記述します。

dart
   ...省略...
       return Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  for (int i = 0; i < 10; i++) ...[
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Container(
                        height: 20,
                        width: 20,
                        color: Colors.red,
                        child: Center(child: Text('$i')),
                      ),
                    ),
                  ],
                ],
              ),
            );
   ...省略...

処理のイメージとしてはfor文でWidgetが格納されたリストを逐一作成して、そのリストをスプレッド演算子でひたすらchildrenのリストに結合していく感じです。

どれくらいWidgetを作りたいかはfor文内の条件式を変更することで自由に変更可能です。

今回は決め打ちで10個のWidgetを自動生成しています。

全部同じWidgetではなく時々違ったWidgetを生成したい場合についてもfor文内で条件分岐を設けたり、関数を起動させる事で対応可能です。

まとめ

  1. Widgetの自動生成はスプレッド演算子を応用することで簡単に実装できる
  2. Dartのスプレッド演算子には通常のに加えて「nullsafety対応版」も存在する
  3. for文をいじる事で自動生成する数を動的にしたり、種類の違うWidgetの出し分けも可能

今回はFlutterでWidgetを動的に自動生成する方法について解説しました。

Flutterの知識だけではなく、使われている言語であるDartの知識もしっかり抑えておくと今回解説した様な処理も書けるようになります。

Dartの文法については「【Flutter】Dartの基礎構文とサンプルコード」で解説しているのでよければ参考にしてください。

【Flutter】Dartの基礎構文とサンプルコード

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です