【2024年10月】弊社では副業案件希望の方を募集しております。<例>土日稼働可等。 詳細はこちら

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

【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)作成にご興味がある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメント一覧 (6件)

コメントする

目次