Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutter List View 概要
Search
najeira
May 31, 2018
Technology
0
1k
Flutter List View 概要
najeira
May 31, 2018
Tweet
Share
More Decks by najeira
See All by najeira
Flutter with Platform
najeira
4
1.2k
Google I/O 2019 Extended Tokyo - Flutter
najeira
1
160
Flutter APP DOJO 2019-04
najeira
1
170
Flutterとの1年
najeira
4
1.4k
Flutter / Google I/O 2018 報告会 信州
najeira
0
260
仕組みを知れば怖くない! Flutter入門
najeira
16
7.7k
FlutterでAndroid/iOS両対応のアプリ開発
najeira
0
4.3k
Google I/O 2017 報告会 Firebase/Cloud
najeira
1
150
Google I/O 2017 報告会 Flutter/Dart
najeira
1
290
Other Decks in Technology
See All in Technology
フロントエンド・オブザーバビリティを支える要素技術を学ぼう
sadnessojisan
2
180
Javaにおける関数型プログラミンへの取り組み
skrb
7
320
「家族アルバム みてね」における運用管理・ オブザーバビリティの全貌 / Overview of Operation Management and Observability in FamilyAlbum
isaoshimizu
4
160
リアルお遍路+SORACOM IoT
ozk009
1
130
たった1人からはじめる【Agile Community of Practice】~ソース原理とFearless Changeを添えて~
ktc_corporate_it
1
430
AIで変わるテスト自動化:最新ツールの多様なアプローチ/ 20240910 Takahiro Kaneyama
shift_evolve
0
210
Fediverse Discovery Providers overview
andypiper
0
160
開発生産性を始める前に開発チームができること / optim-improve-development-productivity.pdf
optim
0
100
自作Cコンパイラ 8時間の奮闘
soukouki
0
830
ロボットアームを遠隔制御の話 & LLMをつかったIoTの話もしたい
soracom
PRO
1
370
サーバレスでモバイルアプリ開発! NTTコム「ビジネスdアプリ」のアーキテクチャ / The architecture of business d app
nttcom
12
240
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
140
Featured
See All Featured
Music & Morning Musume
bryan
46
6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
1
48
Mobile First: as difficult as doing things right
swwweet
221
8.8k
Statistics for Hackers
jakevdp
794
220k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Into the Great Unknown - MozCon
thekraken
29
1.4k
Why You Should Never Use an ORM
jnunemaker
PRO
53
8.9k
A designer walks into a library…
pauljervisheath
201
24k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
23
1.7k
The Invisible Customer
myddelton
119
13k
It's Worth the Effort
3n
182
27k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Transcript
Flutter List View Flutter Meetup Tokyo 2018/05/29 @najeira Flutter List
View 1
Row, Column Flutter List View 2
Column 縦方向のリスト ※Row は横方向 Flutter List View 3
Column new Column( children: <Widget>[ new ListTile( leading: new Icon(Icons.map),
title: new Text('Map'), ), ... ], ), Flutter List View 4
ListView 単純なリスト Flutter List View 5
ListView new ListView( children: <Widget>[ new ListTile( leading: new Icon(Icons.map),
title: new Text('Map'), ), ... ], ), ※child は ListTile でなくとも何でもよい Flutter List View 6
Column or ListView 画面に収まる場合はColumn スクロー ルが必要な場合はListView Flutter List View 7
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
GridView Flutter List View 9
GridView new GridView( gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(cros children: <Widget>[ new Container(
color: Colors.red, alignment: Alignment.center, child: new Text('red', style: style), ), ], ... ), Flutter List View 10
GridView デフォルトだと正方形のグリッドになる gridDelegate に渡している SliverGridDelegateWithFixedCrossAxisCount の childAspectRatio で縦横比率は変えられる Flutter List
View 11
GridView SliverGridDelegate と SliverGridLayout を実装すれば より細かいコントロー ルが可能 Flutter List View
12
独自GridView の例 Flutter List View 13
Sliver Flutter List View 14
Sliver 日本語だと「 小片」 とか「 細片」 とか「 一部」? ListView やGridView より、
いろいろ出来る 低レイヤの機能 ListView やGridView も内部ではSliver を使っている Flutter List View 15
SliverList new CustomScrollView( slivers: <Widget>[ new SliverList( delegate: new SliverChildListDelegate(
<Widget>[ new ListTile( leading: new Icon(Icons.map), title: new Text('Map'), ), .... ※ 最初のListView と同等のUI Flutter List View 16
Header 例えば見出しなど Flutter List View 17
Header CustomScrollView は sliver のリストを受け取る new CustomScrollView( slivers: <Widget>[ new
SliverToBoxAdapter( child: new Text(" リストの見出し"), ), new SliverList( delegate: new SliverChildListDelegate( <Widget>[ new ListTile( leading: new Icon(Icons.map), title: new Text('Map'), ), .... Flutter List View 18
SliverAppBar new CustomScrollView( slivers: <Widget>[ 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
リスト関連のWidget Column ListView GridView CustomScrollView Sliver Sliver**Delegate Flutter List View
20