【Flutter】リスト(List)の完全ガイド！要素の追加(add)・要素の削除(remove)から動的リスト(ListView)・リスト内検索(where)まで

2024年2月12日2024年4月2日

【Flutter】リスト(List)の完全ガイド！要素の追加(add)・要素の削除(remove)から動的リスト(ListView)・リスト内検索(where)まで

いちの

こんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです

この記事でわかること

リスト（List）に要素を追加する方法
リストから要素を削除する方法
動的リスト（ListView）を作成する手順
リスト内で特定の要素を検索する方法

開発環境

Dart 3.0.0
Flutter 3.10.0

1. リスト（List）の基本

Flutterでは、リスト（List）はデータの順序付けられた集合を扱うための基本的なデータ構造です。リスト内の各要素は、インデックス（整数）によってアクセスされます。以下は基本的なリストの宣言と初期化の例です。

サンプルコード

void main() {
  List<String> fruits = ['りんご', 'みかん', 'いちご'];
  print(fruits);
}

解説

List<String>: 文字列型の要素を持つリストを宣言します。
['りんご', 'みかん', 'いちご']: リストを初期化し、りんご、みかん、いちごの3つの要素を持たせます。

2. 要素の追加（add）

リストに新しい要素を追加するには、addメソッドを使用します。以下の例では、リストfruitsに「バナナ」を追加しています。

サンプルコード

void main() {
  List<String> fruits = ['りんご', 'みかん', 'いちご'];
  fruits.add('バナナ'); // バナナを追加
  print(fruits);
}

解説

fruits.add('バナナ'): リストfruitsに'バナナ'を追加します。

3. 要素の削除（remove）

リストから要素を削除するには、removeメソッドを使用します。以下の例では、リストfruitsから「みかん」を削除しています。

サンプルコード

void main() {
  List<String> fruits = ['りんご', 'みかん', 'いちご'];
  fruits.remove('みかん'); // みかんを削除
  print(fruits);
}

解説

fruits.remove('みかん'): リストfruitsから'みかん'を削除します。

ListTileを使用した本格的な商品一覧画面にご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

4. 動的リスト（ListView）

FlutterでUIを構築する際、動的なリストを表示するにはListViewウィジェットを使用します。ListView.builderを用いることで、リストの要素を動的に生成することが可能です。

サンプルコード

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<String> fruits = ['りんご', 'みかん', 'いちご'];
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Dynamic ListView')),
        body: ListView.builder(
          itemCount: fruits.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(fruits[index]),
            );
          },
        ),
      ),
    );
  }
}

解説

ListView.builder: itemCountにリストの長さを指定し、itemBuilderで表示するウィジェットを定義します。
ListTile: リストの各要素を表示するためのウィジェットです。

実務で使用するのはほぼこれなのでここは大事なポイントです

リスト(ListView)要素の区切り線にご興味ある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

5. リスト内検索（where）

リスト内で条件に一致する要素を検索するには、whereメソッドを使用します。以下の例では、リストfruitsから「い」を含む要素を検索しています。

サンプルコード

void main() {
  List<String> fruits = ['りんご', 'みかん', 'いちご'];
  var result = fruits.where((fruit) => fruit.contains('い')).toList();
  print(result); // ['いちご']
}

解説

fruits.where((fruit) => fruit.contains('い')).toList(): contains('い')を満たす要素のみを新しいリストとして返します。
つまり'いちご'のみがコンソールに出力されます。

6. まとめ

Flutterにおけるリスト（List）の操作は多岐にわたりますが、この記事で紹介した基本的な操作をマスターすることで、データの管理やUIの構築が格段に容易になります。要素の追加や削除、動的リストの生成、リスト内検索は、Flutter開発における重要なスキルセットです。これらの操作を活用して、より効率的かつ効果的なアプリ開発を目指しましょう。

いちの

自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。

カード(Card)ウィジェットを使った、実用的なリスト(ListView)作成にご興味がある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。