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
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
360
Autonomous Database - Dedicated 技術詳細 / adb-d_technical_detail_jp
oracle4engineer
PRO
4
10k
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
110
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
cmusudakeisuke
1
240
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
100
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
150
オブザーバビリティが広げる AIOps の世界 / The World of AIOps Expanded by Observability
aoto
PRO
0
350
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
390
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
5分でカオスエンジニアリングを分かった気になろう
pandayumi
0
220
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
160
落ちる 落ちるよ サーバーは落ちる
suehiromasatoshi
0
150
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
KATA
mclloyd
32
14k
Being A Developer After 40
akosma
90
590k
Building Adaptive Systems
keathley
43
2.7k
Building Applications with DynamoDB
mza
96
6.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Practical Orchestrator
shlominoach
190
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
Side Projects
sachag
455
43k
Designing for humans not robots
tammielis
253
25k
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