前回は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にはスクロール機能がないために起きる現象なので、次回はスクロールできるウィジェットについて学習しようと思います。