Slide 1
Slide 1 text
Flutter List View
Flutter Meetup Tokyo
2018/05/29
@najeira
Flutter List View
1
Slide 2
Slide 2 text
Row, Column
Flutter List View
2
Slide 3
Slide 3 text
Column
縦方向のリスト
※Row
は横方向
Flutter List View
3
Slide 4
Slide 4 text
Column
new Column(
children: [
new ListTile(
leading: new Icon(Icons.map),
title: new Text('Map'),
),
...
],
),
Flutter List View
4
Slide 5
Slide 5 text
ListView
単純なリスト
Flutter List View
5
Slide 6
Slide 6 text
ListView
new ListView(
children: [
new ListTile(
leading: new Icon(Icons.map),
title: new Text('Map'),
),
...
],
),
※child
は ListTile
でなくとも何でもよい
Flutter List View
6
Slide 7
Slide 7 text
Column or ListView
画面に収まる場合はColumn
スクロー
ルが必要な場合はListView
Flutter List View
7
Slide 8
Slide 8 text
ListView
数が多い場合は children
を生成せず builder
を使う
new ListView.builder(
itemCount: 100,
itemBuilder: (BuildContext context, int index) {
return new ListTile(
title: new Text('$index'),
);
},
),
※
必要になったときに itemBuilder
が呼ばれるので
child
の生成を lazy
にできる
Flutter List View
8
Slide 9
Slide 9 text
GridView
Flutter List View
9
Slide 10
Slide 10 text
GridView
new GridView(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(cros
children: [
new Container(
color: Colors.red,
alignment: Alignment.center,
child: new Text('red', style: style),
),
],
...
),
Flutter List View
10
Slide 11
Slide 11 text
GridView
デフォルトだと正方形のグリッドになる
gridDelegate
に渡している
SliverGridDelegateWithFixedCrossAxisCount
の
childAspectRatio
で縦横比率は変えられる
Flutter List View
11
Slide 12
Slide 12 text
GridView
SliverGridDelegate
と
SliverGridLayout
を実装すれば
より細かいコントロー
ルが可能
Flutter List View
12
Slide 13
Slide 13 text
独自GridView
の例
Flutter List View
13
Slide 14
Slide 14 text
Sliver
Flutter List View
14
Slide 15
Slide 15 text
Sliver
日本語だと「
小片」
とか「
細片」
とか「
一部」？
ListView
やGridView
より、
いろいろ出来る
低レイヤの機能
ListView
やGridView
も内部ではSliver
を使っている
Flutter List View
15
Slide 16
Slide 16 text
SliverList
new CustomScrollView(
slivers: [
new SliverList(
delegate: new SliverChildListDelegate(
[
new ListTile(
leading: new Icon(Icons.map),
title: new Text('Map'),
),
....
※
最初のListView
と同等のUI
Flutter List View
16
Slide 17
Slide 17 text
Header
例えば見出しなど
Flutter List View
17
Slide 18
Slide 18 text
Header
CustomScrollView
は sliver
のリストを受け取る
new CustomScrollView(
slivers: [
new SliverToBoxAdapter(
child: new Text("
リストの見出し"),
),
new SliverList(
delegate: new SliverChildListDelegate(
[
new ListTile(
leading: new Icon(Icons.map),
title: new Text('Map'),
),
....
Flutter List View
18
Slide 19
Slide 19 text
SliverAppBar
new CustomScrollView(
slivers: [
new SliverAppBar(
title: new Text('SliverAppBar'),
floating: true,
),
new SliverList(
delegate: new SliverChildBuilderDelegate(
(BuildContext context, int index) {
return new MyRow( ... );
},
childCount: 1000,
...
Flutter List View
19
Slide 20
Slide 20 text
リスト関連のWidget
Column
ListView
GridView
CustomScrollView
Sliver
Sliver**Delegate
Flutter List View
20