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
1.1k
Flutter List View 概要
najeira
May 31, 2018
Tweet
Share
More Decks by najeira
See All by najeira
Flutter with Platform
najeira
4
1.4k
Google I/O 2019 Extended Tokyo - Flutter
najeira
1
190
Flutter APP DOJO 2019-04
najeira
1
190
Flutterとの1年
najeira
4
1.5k
Flutter / Google I/O 2018 報告会 信州
najeira
0
310
仕組みを知れば怖くない! Flutter入門
najeira
16
8k
FlutterでAndroid/iOS両対応のアプリ開発
najeira
0
4.5k
Google I/O 2017 報告会 Firebase/Cloud
najeira
1
170
Google I/O 2017 報告会 Flutter/Dart
najeira
1
320
Other Decks in Technology
See All in Technology
バッチ処理で悩むバックエンドエンジニアに捧げるAWS Glue入門
diggymo
3
200
Language Update: Java
skrb
2
290
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
720
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
910
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
150
EncryptedSharedPreferences が deprecated になっちゃった!どうしよう! / Oh no! EncryptedSharedPreferences has been deprecated! What should I do?
yanzm
0
240
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
430
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
170
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
「全員プロダクトマネージャー」を実現する、Cursorによる仕様検討の自動運転
applism118
21
10k
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
450
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
220
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Automating Front-end Workflow
addyosmani
1370
200k
GraphQLとの向き合い方2022年版
quramy
49
14k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Why Our Code Smells
bkeepers
PRO
339
57k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Writing Fast Ruby
sferik
628
62k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
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