Dartでリストに要素を追加する方法！【Flutter対応】

Dart（Flutter）でリスト（配列）に要素を追加する方法について書いています。

リストに要素を追加する処理を書くのは、例えば次のようなケースです。

• ボタンを押したらリストにデータを追加したい
• APIから取得したデータをリストに格納したい
• 入力フォームの内容を配列として管理したい
• ListViewに表示するデータを動的に増やしたい

※ 載せているコードはFlutter 3.29.3 / Dart 3.7.2で動作を確認しています。

Dartのリスト（配列）とは？

Dartでは、配列としてList型を使用します。
複数の値をまとめて保持したいときに使います。

List<int> numbers = [1, 2, 3];

• 要素数は可変
• 同じ型のデータをまとめて管理できる
• FlutterのUI（ListViewなど）と相性が良い

上記のコードでは3つの数値をnumbersリストに保持しています。

addメソッドでリストに要素を追加する

リストに要素を追加するときに、最も基本的な方法がadd()メソッドです。

List<String> fruits = ['apple', 'banana'];

fruits.add('orange');

print(fruits);
// [apple, banana, orange]

fruitsという文字列のリストを作っています。
その次の処理で、リストに対して「orange」を追加しています。

結果を確認すると「[apple, banana, orange]」となり、末尾に追加されていることが確認できます。

特徴

• リストの末尾に要素を追加
• 1つの要素を追加したいときに最適

addAllメソッドで複数の要素をまとめて追加する

複数の要素を一度に追加したい場合はaddAll()メソッドを使います。

List<int> numbers = [1, 2];

numbers.addAll([3, 4, 5]);

print(numbers);
// [1, 2, 3, 4, 5]

numbersリストを作成して、次の処理でリストに対してaddAll()メソッドを使用して「[3, 4, 5]」というリスト要素を追加しています。
結果を確認すると「[1, 2, 3, 4, 5]」と、最初のリストの要素の末尾に渡したリスト要素が追加されました。

こんなときに便利

• APIレスポンスの配列をそのまま追加
• 初期データ＋追加データを結合したいとき

insertメソッドで指定した位置に要素を追加する

リストの途中に要素を追加したい場合はinsert()メソッドを使います。

List<String> names = ['Alice', 'Bob', 'Charlie'];

names.insert(1, 'Tom');

print(names);
// [Alice, Tom, Bob, Charlie]

namesという文字列のリストを作っています。
次の処理でinsertメソッドを使って、1番目に要素(Tom)を追加しました。

リストは「0」始まりで数えるので、次の「Bob」の位置に追加されることになります。
結果を確認すると、ひとつずれて「[Alice, Tom, Bob, Charlie]」となったことが確認できます。

注意点

• インデックスは0始まり
• 範囲外を指定するとエラーになる

insertAllメソッドで指定位置に複数要素を追加する

リストの要素の途中に複数の要素を追加することもできます。

List<int> list = [1, 4];

list.insertAll(1, [2, 3]);

print(list);
// [1, 2, 3, 4]

listという数値のリストを作成しています。
次の処理で、1番目にリスト「[2, 3]」を追加しています。

結果を確認すると、1番目の途中から2つの要素が追加されて「[1, 2, 3, 4]」となったことが確認できました。

Flutterでリストに要素を追加する例（StatefulWidget）

Flutterでは、リストに要素を追加するときにsetState()と組み合わせるのが重要です。

class SamplePage extends StatefulWidget {
  const SamplePage({super.key});

  @override
  State<SamplePage> createState() => _SamplePageState();
}

class _SamplePageState extends State<SamplePage> {
  List<String> items = [];

  void addItem() {
    setState(() {
      items.add('Item ${items.length + 1}');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('List追加サンプル')),
      body: ListView(
        children: items.map((e) => ListTile(title: Text(e))).toList(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: addItem,
        child: const Icon(Icons.add),
      ),
    );
  }
}

StatefulWidgetのSamplePageを作成しています。
Scaffoldで画面を構成していて、FloatingActionButtonがタップされたときにaddItem()メソッドで要素をitemsリストに追加しています。

itemsリストに追加した要素はListViewでリスト形式のUIで表示されます。
また、追加時にsetStateメソッドを呼び出すことで、画面に反映されています。

ポイント

• setState()を忘れるとUIが更新されない
• ListViewと組み合わせるのが定番

リストに要素を追加する場合の注意点

リストに要素を追加するときの注意点です。

const / final なリストには注意

finalで定義したリストの場合は、add()メソッドなどで要素を追加できますが、
constで定義した場合は要素は追加できないため注意が必要です。

final list = [1, 2];
list.add(3); // OK

const list2 = [1, 2];
list2.add(3); // エラー

• final：中身は変更できる
• const：中身も変更不可

初期化前のリストに注意する

List<String>? list;
list!.add('test'); // 実行時エラーの可能性

null許可のリストで、初期化せずにリストに値を追加しようとするとエラーになります。
初期化を忘れずに行いましょう。

List<String> list = [];

まとめ

今回はDart（Flutter）でリストに要素を追加する方法について確認していきました。

追加する件数や、どこの位置に追加していくかでメソッドを使い分けていきましょう。