この記事では、CustomScrollViewとSliverFixedExtentListを使ってスクロール画面を実装する方法を解説します。
SNSやLINEなど身近なところで使われている機能なので、馴染みのあるウィジェットだと思います。コードも非常にシンプルで使いやすいのでマスターしちゃいましょう!
実装
アーキテクチャー
ユーザーインターフェース
ソースコード
body: CustomScrollView(
slivers: <Widget>[
SliverFixedExtentList(
itemExtent: 150.0,
delegate: SliverChildListDelegate(
[
Container(color: Colors.red,child: Text('アイテム1',style: list_item),),
Container(color: Colors.purple,child: Text('アイテム2',style: list_item),),
Container(color: Colors.green, child: Text('アイテム3',style: list_item),),
Container(color: Colors.orange, child: Text('アイテム4',style: list_item),),
Container(color: Colors.yellow, child: Text('アイテム5',style: list_item),),
Container(color: Colors.red, child: Text('アイテム6',style: list_item),),
Container(color: Colors.purple, child: Text('アイテム7',style: list_item),),
Container(color: Colors.green, child: Text('アイテム8',style: list_item),),
Container(color: Colors.orange, child: Text('アイテム9',style: list_item),),
Container(color: Colors.yellow, child: Text('アイテム10',style: list_item),),
],
),
),
],
),
頻出プロパティ
- slivers : この中にスクロールするアイテムを入れます
- SliverFixedExtentList:表示するアイテムのサイズが決まっている場合に使用します。可変にしたい場合は SliverListを使用します。
- itemExtent:表示するアイテムの高さを指定します。
- delegate:以下の説明を参照してください。
delegeteパラメータは、スクロールされて次のitemが表示されそうになったときにそのitemをビルドするための関数を設定します。表示される分だけビルドするという仕組みにより、パフォーマンスが高く保たれ、それを実現するために重要なパラメータがdelegateパラメータです。
delegateの概念については以下の記事がわかりやすので参考にしてみてください。