Dartでリストの要素を削除する方法！【Flutter対応】

Dart（Flutter）でリスト(配列)から特定の要素を削除する方法について書いています。

削除処理が必要になりそうなのは、例えば次のようなケースです。

• Todoリストで完了した項目を削除したい
• ListViewでスワイプしたアイテムを削除したい
• 特定の条件に一致するデータをまとめて削除したい
• ユーザー操作に応じてリストの中身を更新したい

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

インデックスを指定して削除する（removeAt）

リストの要素位置を指定して削除するときにはremoveAt()メソッドを使います。

removeAtの基本的な使い方

List<String> fruits = ['apple', 'banana', 'orange'];
fruits.removeAt(1);

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

fruitsリストを作成して、次の行でremoveAt()を使って要素を削除しています。
removeAt()メソッドには「1」を渡しています。

リストは「0」番目から数えるので、1番目の要素(banana)が削除されます。
実行後のリストは下記のようになります。

['apple', 'orange']

特徴

• 指定した位置の要素を削除
• インデックスは0から始まる
• 範囲外のインデックスを指定するとエラーになる

こんなときに使う

• ListViewのindexが分かっている場合
• ユーザーが選択した位置の要素を削除したい場合

値を指定して削除する（remove）

リストの値を指定して削除する方法です。

removeの基本的な使い方

リストの値を指定して削除するときには、remove()メソッドを使用します。

List<String> fruits = ['apple', 'banana', 'orange'];
fruits.remove('banana');

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

fruitsリストを作成して、次の処理でremove()メソッドを使っています。
渡した「banana」がリストに入っているので削除されます。

結果は「[apple, orange]」となります。

特徴

• 指定した値と一致する最初の1件だけを削除
• リストに値が見つからない場合は何も起こらない

注意点

最初の1個だけしか削除されないのが注意点です。

List<int> numbers = [1, 2, 2, 3];
numbers.remove(2);

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

numbersリストから、要素「2」を削除しようとしています。
numbersリストには2つの要素がありますが、初めに見つかった1つ目しか削除されません。

このように、すべて削除されるわけではない点に注意しましょう。

条件に一致する要素を削除する（removeWhere）

条件に一致する要素を削除する方法です。

removeWhereの基本的な使い方

removeWhere()メソッドを使うことで、リストから条件に一致したデータだけ削除することができます。

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

numbers.removeWhere((value) => value % 2 == 0);
print(numbers); // [1, 3, 5]

numbersリストを作成しています。
次の処理でremoveWhere()メソッドを使って、リストの要素を削除しています。
リストに渡した関数で、結果がtrueになる要素が削除されます。

value変数には、リストの要素がひとつずつ渡され評価されます。
上記コードでは、2で割った余りが0だったらtrueになるので、結果は下記のようになります。

[1, 3, 5]

特徴

• 条件に一致する要素をまとめて削除
• ラムダ式（無名関数）で条件を指定できる

よく使う例

• ステータスが無効なデータを削除
• フラグがfalseの要素を削除

最初・最後の要素を削除する

リストの最初の値と、最後の値を削除する方法です。

先頭を削除（removeAt + index）

リストの先頭の値を削除するときは、removeAt()メソッドで0番目(先頭)を指定すると良いです。

List<String> fruits = ['apple', 'banana', 'orange'];
fruits.removeAt(0);

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

末尾を削除（removeLast）

リストからremoveLast()メソッドを呼ぶことで、リストの末尾の要素を削除することができます。

List<String> fruits = ['apple', 'banana', 'orange'];
fruits.removeLast();

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

removeLastの注意点

• 空のリストで呼ぶとエラーになる
• 削除前にisNotEmptyでチェックすると安全

if (fruits.isNotEmpty) {
  fruits.removeLast();
}

Flutterでよくある削除例（setStateと組み合わせ）

Flutterでは、リストを削除したあとに画面を更新する必要があります。
下記はリストの内容をListViewで表示して、追加や削除をできるようにしたサンプルコードです。

import 'package:flutter/material.dart';

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

  @override
  State<ListDeleteSamplePage> createState() => _ListDeleteSamplePageState();
}

class _ListDeleteSamplePageState extends State<ListDeleteSamplePage> {
  final List<String> items = [];
  int itemCount = 0;

  void _addItem() {
    setState(() {
      itemCount += 1;
      items.add('Item ${itemCount}');
    });
  }

  void _removeItem(int index) {
    setState(() {
      items.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('List 削除サンプル'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addItem,
        child: const Icon(Icons.add),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(items[index]),
            trailing: IconButton(
              icon: const Icon(Icons.delete),
              onPressed: () => _removeItem(index),
            ),
          );
        },
      ),
    );
  }
}

FloatingActionButtonの_addItem()メソッドでリストのitemsに要素が追加されます。
追加された要素はListViewのitemBuilderの箇所で表示されるように設定しています。

表示したリスト要素の右側にアイコンを表示していて、タップすると_removeItem()メソッドが動作して、リストのタップした要素位置が削除されます。
どちらのメソッドでもsetStateを使うことで、画面に反映しています。

リスト削除時の注意点まとめ

リスト削除時の注意点のまとめです。

• removeAtはインデックス範囲に注意
• removeは最初の1件のみ削除
• 複数条件削除はremoveWhereが便利
• FlutterではsetStateを忘れない

まとめ

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

リストの要素を削除するときも、用途によってメソッドを使い分けていきましょう。