Zenn
🔖

【Flutter】ListViewの使い方 サンプルコードあり

に公開
Flutter
tech

【Flutter】ListViewの使い方 サンプルコードあり

Flutterでリスト表示を行う際によく使われるのがListViewウィジェットです。本記事では、ListViewの基本的な使い方と、シンプルなサンプルコードを紹介します。

ListViewとは？

ListViewは、複数のウィジェットを縦または横にスクロール可能なリストとして表示できるFlutterのウィジェットです。大量のデータでも効率的に描画できるため、リスト表示には欠かせません。

サンプルコード

以下は、ListView.builderを使って100件のアイテムを表示するサンプルコードです。リストの各アイテムをタップすると、スナックバーでアイテム名を表示します。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ListView Sample',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // サンプルデータ
  final List<String> _items = List<String>.generate(100, (index) => "Item $index");

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("ListView Sample"),
      ),
      body: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_items[index]),
            onTap: () {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(content: Text('Tapped on ${_items[index]}')),
              );
            },
          );
        },
      ),
    );
  }
}

ポイント解説

  • ListView.builder
    ListView.builderは表示するアイテム数が多い場合に、必要な分だけWidgetを生成してくれるので、パフォーマンスの面で優れています。

  • itemBuilder
    各リストアイテムのWidgetを返す関数です。indexでリストのインデックスにアクセスできます。

  • onTap
    各アイテムをタップした時の処理。今回はSnackBarでタップしたアイテム名を表示しています。

まとめ

ListViewはFlutterアプリでリスト表示を行う際の基本ウィジェットです。ListView.builderを使うことで、効率的に大量データの表示やイベント処理が可能です。
ぜひ、サンプルコードを参考に自分のアプリに取り入れてみてください！

Discussion