10. FlutterでListViewをタップした時の挙動を実装する

前回はListViewの表示について学習しました。 実際のアプリ開発では画面の表示だけでなくそのUIをタップしたときの挙動も実装しなければならないことが多いです。 今回はそのListViewで表示されているものをタップしたときの処理を実装していきます。

ListViewの中にFlatButtonなどのButtonを追加してもいいですが、ListViewには専用のウィジェットListTileが用意されています。

ListTileについて

まずはListTileのインスタンスの生成の仕方について学びます。

            ListTile(
              leading: [項目の左側に表示するIcon],
              title: [表示させる文字],
              selected: [その項目の選択状態を管理するフラグ。trueであれば選択されている状態],
              onTap: () {
                // タップされたときのイベントを書きます
              },

これだけ覚えればListTileの基本はできたようなものです。 実際にサンプルコードを見ていきます。

listview_sample.dart

import 'package:flutter/material.dart';

class SampleListView extends StatefulWidget {
  @override
  _SampleListViewState createState() => _SampleListViewState();
}

class _SampleListViewState extends State<SampleListView> {
  String _message;
  int _index;

  @override
  void initState() {
    _message = 'OK';
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    List<int> text = [1,2,3,4,5,6,7,8,9,10];
    return Scaffold(
      appBar: AppBar(
        title: Text('Sample List View App'),
      ),
      body: Column(
        children: <Widget>[
          Text(
            _message,
            style: TextStyle(
              fontSize: 20.0
            ),
          ),
          ListView(
            shrinkWrap: true,
            padding: EdgeInsets.all(10.0),
            children: <Widget>[
              for (var index in text)
//                Text(i.toString(), style: TextStyle(
//                backgroundColor: Colors.green,
//                  fontSize: 30.0)),
            ListTile(
              leading: Icon(Icons.favorite),
              title: Text('$index'),
              selected: _index == index,
              onTap: () {
                _index = index;
                _tapTile();
              },
            )

            ],
          )
        ],
      ),
    );
  }
  void _tapTile() {
    setState(() {
      _message = 'No. $_index を選択しました';
    });
  }
}

main.dart

import 'package:flutter/material.dart';
import './listview_sample.dart';

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

class MyApp extends StatelessWidget {
  final title = 'ListViewのサンプルコード';
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: true,
      title: 'ListView App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        primaryColor: const Color(0xff2196f3),
        accentColor: const Color(0xff2196f3),
        canvasColor: const Color(0xfffafafa),
      ),
      home: new SampleListView(),
    );
  }
}

以上がサンプルのコードになります。 こちらをビルドすると次のスクショのように表示されます。

ListViewのListTileを使った画像

サンプルコードからはわかりにくいですが、 onTapで処理が走ったあとにselectedの値がtrueであれば選択状態を表しているみたいです。 今回はListViewの各項目にindexで数字の連番を張って、ウィジェットに_indexの変数をもたせて_indexとindexを比較して同じであれば項目が選択状態になるように実装しました。

ここまででListViewとListTileのそれぞれの実装方法について学習できました。 ただ、ListTileを実装してもその項目が画面上にすべて収まらないときにはエラーのバナーが見えてしまいますね。

これはListViewにはスクロール機能がないために起きる現象なので、次回はスクロールできるウィジェットについて学習しようと思います。