【Flutter】ListTileで効率的なリスト作成を実現

2023年6月14日
2023年6月17日
Widget
Flutter, widget, WidgetOfTheWeek

Widget

対象者

Flutterを学び始めたばかりで、基本的なウィジェットの使い方を理解したい方
自分でアプリを開発するスキルを身につけたいと考えている方
ITエンジニアとしてのスキルを向上させ、キャリアアップを目指している方

はじめに

ListTile というのは、日本語で「リストのタイル」または「リストの項目」という意味です。プログラムの世界では一般的にリスト内の一つ一つの要素や項目を指すことを示します。
Flutterにおいては、一つの固定高さの行を表現するウィジェットです。そのため、リストビューやメニューなど、複数の項目を一覧表示する際に使用することができます。
実際のアプリとしては、メールアプリや設定メニューなどといったケースにおいて、各メールや設定項目を一覧表示し、タップすると詳細画面に遷移するというような機能を実現することができます。
ここでは、ListTileの基本的な使い方から、カスタマイズ方法、さらには具体的なコード例まで、幅広く解説しています。この記事を読むことで、あなたはFlutterの使い方をより深く理解し、自分でアプリを開発するための一歩を踏み出すことができるでしょう。

ListTileの基本

ListTileとは

FlutterのListTileは、アプリケーションのリスト表示において重要な役割を果たします。これは、通常、テキストと先頭または末尾のアイコンを含む単一の固定高さの行として表現されます。この特性から、ListTileは一般的に、リスト内の各項目を表現するために使用されます。これは、ユーザーが一目で情報を理解できるようにするための重要な要素です。

例えば、以下のようなシンプルなListTileを考えてみましょう。

ListTile(
  leading: Icon(Icons.photo_album),
  title: Text('Album'),
  trailing: Icon(Icons.more_vert),
);

このコードは、アルバムのアイコン、タイトル、そして追加のメニューを示すアイコンを含むListTileを作成します。

ListTileの構造

ListTileは、その構造が非常に直感的であるため、初心者でも簡単に理解することができます。一般的に、ListTileはスタート、センター、エンドの3つのセクションに分けられます。スタートセクションには先頭のウィジェットが、センターセクションにはタイトルとサブタイトルが、エンドセクションには末尾のウィジェットが含まれます。

以下に、各セクションを含むListTileの例を示します。

ListTile(
  leading: Icon(Icons.photo_album),
  title: Text('Album Title'),
  subtitle: Text('Album Subtitle'),
  trailing: Icon(Icons.more_vert),
);

この例では、先頭のウィジェットとしてアルバムのアイコン、タイトルとサブタイトルとしてテキスト、そして末尾のウィジェットとして追加のメニューを示すアイコンが設定されています。

このように、ListTileはその構造と使いやすさから、Flutterでリスト表示を行う際の重要なウィジェットとなっています。

ListTileの種類

CheckboxListTile

Flutterでは、特定のアクションを実行するためのListTileの種類がいくつか提供されています。その一つがCheckboxListTileです。これは、ユーザーが選択を行うためのチェックボックスを含むListTileです。これにより、ユーザーはリスト内の項目を選択し、その選択をアプリケーションに伝えることができます。

以下に、CheckboxListTileの使用例を示します。

CheckboxListTile(
  title: Text('Remember me'),
  value: _isChecked,
  onChanged: (bool value) {
    setState(() {
      _isChecked = value;
    });
  },
);

この例では、タイトルとしてテキストを設定し、ユーザーがチェックボックスをクリックすると_isChecked変数の値が更新されます。

RadioListTile

RadioListTileは、ユーザーがリスト内の一つの項目だけを選択できるようにするためのウィジェットです。これは、複数の選択肢から一つだけを選ぶ必要がある場合に便利です。

以下に、RadioListTileの使用例を示します。

RadioListTile<String>(
  title: Text('Option 1'),
  value: 'option1',
  groupValue: _selectedOption,
  onChanged: (String value) {
    setState(() {
      _selectedOption = value;
    });
  },
);

この例では、タイトルとしてテキストを設定し、ユーザーがラジオボタンをクリックすると_selectedOption変数の値が更新されます。

SwitchListTile

SwitchListTileは、ユーザーがスイッチをオンまたはオフにすることで選択を行うためのウィジェットです。これは、特定の設定を有効または無効にする場合などに便利です。

以下に、SwitchListTileの使用例を示します。

SwitchListTile(
  title: Text('Enable Notifications'),
  value: _isSwitched,
  onChanged: (bool value) {
    setState(() {
      _isSwitched = value;
    });
  },
);

この例では、タイトルとしてテキストを設定し、ユーザーがスイッチを切り替えると_isSwitched変数の値が更新されます。

これらのListTileの種類は、それぞれ異なる目的とユーザーインタラクションを提供するために設計されており、アプリケーションの要件に応じて適切なものを選択することができます。

ListTileのカスタマイズ

テーマの変更

Flutterでは、アプリケーション全体の見た目を一貫させるためにテーマを使用することができます。ListTileも例外ではなく、テーマを変更することで、ListTileの見た目を自分のデザインに合わせてカスタマイズすることができます。これは、ブランドイメージを一貫させるために重要な要素であり、また、ユーザー体験を向上させるためにも重要です。

例えば、以下のようにテーマを変更してListTileの色をカスタマイズすることができます。

Theme(
  data: Theme.of(context).copyWith(dividerColor: Colors.red),
  child: ListTile(
    leading: Icon(Icons.photo_album),
    title: Text('Album'),
    trailing: Icon(Icons.more_vert),
  ),
);

この例では、Themeウィジェットを使用して、ListTileの区切り線の色を赤に変更しています。

プロパティを利用したカスタマイズ

ListTileは、多くのプロパティを提供しており、これらを利用することでListTileをさらにカスタマイズすることができます。たとえば、色（ホバー、押下などの異なる状態で）、形状、タイトルと他の要素の間のスペース、高さなどを変更することができます。

以下に、プロパティを利用したカスタマイズの例を示します。

ListTile(
  leading: Icon(Icons.photo_album),
  title: Text('Album'),
  trailing: Icon(Icons.more_vert),
  tileColor: Colors.blue,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
);

この例では、tileColorプロパティを使用してListTileの背景色を青に、shapeプロパティを使用してListTileの形状を角丸に設定しています。

これらのカスタマイズ方法を利用することで、アプリケーションの見た目を自分のデザインに合わせて調整することができます。これは、ユーザー体験を向上させるために重要な要素であり、また、アプリケーションのブランドイメージを一貫させるためにも重要です。

ListTileの高さ調整

FlutterのListTileは、Material Designの仕様に基づいて設計されているため、その高さは基本的に固定されています。しかし、場合によっては、ListTileの高さを微調整したいというニーズが出てくるかもしれません。そのような場合には、visualDensityプロパティを使用することで、ListTileの高さを一定の範囲で調整することができます。

visualDensityプロパティは、ウィジェットの密度を調整するためのプロパティで、値を大きくするとウィジェットが疎に、小さくするとウィジェットが密になります。これにより、ウィジェットのサイズや間隔を微調整することができます。

以下に、visualDensityプロパティを使用したListTileの高さ調整の例を示します。

ListTile(
  leading: Icon(Icons.photo_album),
  title: Text('Album'),
  trailing: Icon(Icons.more_vert),
  visualDensity: VisualDensity(vertical: -2),
);

この例では、visualDensityプロパティを使用して、ListTileの高さをデフォルトよりも小さく設定しています。

このように、visualDensityプロパティを使用することで、ListTileの高さを一定の範囲で調整し、より細かいデザイン調整を行うことができます。これは、アプリケーションの見た目を自分のデザインに合わせて調整するために重要な要素であり、また、ユーザー体験を向上させるためにも重要です。

ListTile間の区切り線の追加

ListViewとListTile.divideTilesの使用

FlutterのListTileは、リストの各項目を表現するためのウィジェットです。しかし、複数のListTileが連続して表示されると、どこからどこまでが一つの項目なのかが分かりづらくなることがあります。そこで、ListTile間に区切り線を追加することで、視覚的に項目を分けることができます。

ListTile間に区切り線を追加する方法として、ListViewウィジェットとListTile.divideTilesメソッドの組み合わせが一般的です。ListViewはスクロール可能なリストを作成するウィジェットで、ListTile.divideTilesメソッドは、提供されたListTileの間に水平線を挿入します。

具体的なコードは以下のようになります。

ListView(
  children: ListTile.divideTiles(
    context: context,
    tiles: [
      ListTile(
        title: Text('Item 1'),
      ),
      ListTile(
        title: Text('Item 2'),
      ),
      // 他のListTile項目...
    ],
  ).toList(),
)

このコードでは、まずListTile.divideTilesメソッドを使用して、ListTileの間に区切り線を挿入します。そして、その結果をListViewのchildrenプロパティに渡すことで、区切り線付きのリストを作成します。

このように、ListViewとListTile.divideTilesを使用することで、ListTile間に区切り線を追加し、視覚的に項目を分けることができます。これにより、ユーザーは一つ一つの項目を明確に認識しやすくなります。

スワイプによるListTileの削除

Dismissibleウィジェットの使用

Flutterでは、スワイプによる操作が一般的に使用されます。特にリスト表示では、項目をスワイプして削除するという操作は、ユーザーにとって直感的で便利な機能です。Flutterでは、この機能を実装するためにDismissibleウィジェットを使用します。

Dismissibleウィジェットは、子ウィジェットをスワイプして削除することができるウィジェットです。スワイプ操作が行われると、onDismissedコールバックが呼び出され、ここで削除操作を行います。

以下に、Dismissibleウィジェットを使用したListTileの削除の例を示します。

Dismissible(
  key: Key(item),
  onDismissed: (direction) {
    setState(() {
      items.remove(item);
    });

    ScaffoldMessenger.of(context)
        .showSnackBar(SnackBar(content: Text("$item dismissed")));
  },
  child: ListTile(title: Text('$item')),
);

この例では、Dismissibleウィジェットを使用してListTileをラップし、スワイプ操作が行われたときにonDismissedコールバックを通じて項目を削除しています。

このように、Dismissibleウィジェットを使用することで、スワイプによるListTileの削除を簡単に実装することができます。これは、ユーザー体験を向上させるために重要な要素であり、また、アプリケーションの操作性を向上させるためにも重要です。

Q&A

Q1: FlutterのListTileとは何ですか？

A1: ListTileはFlutterのウィジェットで、一貫したデザインを維持しながら、テキスト、アイコン、チェックボックスなどのさまざまな要素を組み合わせてリスト項目を作成することができます。また、テーマやプロパティを使用してカスタマイズしたり、スワイプによる削除機能を追加したりすることも可能です。

Q2: ListTileの高さを調整するにはどうすればいいですか？

A2: ListTileの高さは基本的に固定されていますが、visualDensityプロパティを使用することで、一定の範囲で調整することができます。visualDensityプロパティは、ウィジェットの密度を調整するためのプロパティで、値を大きくするとウィジェットが疎に、小さくするとウィジェットが密になります。

Q3: スワイプによるListTileの削除機能を追加するにはどうすればいいですか？

A3: スワイプによる削除機能を追加するには、Dismissibleウィジェットを使用します。Dismissibleウィジェットは、子ウィジェットをスワイプして削除することができるウィジェットで、スワイプ操作が行われると、onDismissedコールバックが呼び出され、ここで削除操作を行います。

まとめ

FlutterのListTileは、その柔軟性と使いやすさから、アプリケーション開発における重要なウィジェットとなりました。一貫したデザインを維持しながら、テキスト、アイコン、チェックボックスなどのさまざまな要素を組み合わせてリスト項目を作成できることが学びました。また、テーマやプロパティを使用してカスタマイズしたり、スワイプによる削除機能を追加したりする方法も理解しました。特に、Dismissibleウィジェットを使用してスワイプによる削除機能を追加する方法は、ユーザー体験を向上させるために重要な要素であることがわかりました。これらの知識を活用して、効率的で使いやすいアプリケーションを開発することができるようになりました。

参考

ソース(main.dartにコピペして動作確認用)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter ListTile Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  var _isChecked = false;
  var _selectedOption = 'option1';
  var _isSwitched = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter ListTile Demo'),
      ),
      body: ListView(
        children: ListTile.divideTiles(
          context: context,
          tiles: [
            Dismissible(
              key: Key('tile1'),
              onDismissed: (direction) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text("Tile dismissed")),
                );
              },
              child: ListTile(
                leading: Icon(Icons.map),
                title: Text('Map'),
                trailing: Icon(Icons.navigate_next),
                visualDensity: VisualDensity(horizontal: 0, vertical: -4),
              ),
            ),
            Dismissible(
              key: Key('tile2'),
              onDismissed: (direction) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text("Tile dismissed")),
                );
              },
              child: ListTile(
                leading: Icon(Icons.photo_album),
                title: Text('Album'),
                trailing: Icon(Icons.navigate_next),
                visualDensity: VisualDensity(horizontal: 0, vertical: -4),
              ),
            ),
            Dismissible(
              key: Key('tile3'),
              onDismissed: (direction) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text("Tile dismissed")),
                );
              },
              child: ListTile(
                leading: Icon(Icons.phone),
                title: Text('Phone'),
                trailing: Icon(Icons.navigate_next),
                visualDensity: VisualDensity(horizontal: 0, vertical: -4),
              ),
            ),
            CheckboxListTile(
              title: Text('Remember me'),
              value: _isChecked,
              onChanged: (bool? value) {
                setState(() {
                  _isChecked = value ?? false;
                });
              },
            ),
            RadioListTile<String>(
              title: Text('Option 1'),
              value: 'option1',
              groupValue: _selectedOption,
              onChanged: (String? value) {
                setState(() {
                  _selectedOption = value ?? '';
                });
              },
            ),
            SwitchListTile(
              title: Text('Enable Notifications'),
              value: _isSwitched,
              onChanged: (bool value) {
                setState(() {
                  _isSwitched = value;
                });
              },
            ),
          ],
        ).toList(),
      ),
    );
  }
}