【Flutter】SliverListViewでスクロール画面を作成

WEB

  この記事では、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の概念については以下の記事がわかりやすので参考にしてみてください。

micel

micel

理系メーカーで5年間、社畜として飼われていましたが、副業で¥617円(時給¥200円くらいww)稼いで価値観が変わりました。たった¥617円だけど給料ではなく自分で稼いだお金はわたしにとって大きな価値がありました。成功体験とかは語れないけど、私みたいなサラリーマンが一歩目を踏み出すきっかけを作りたいです。

関連記事

nono

nono

住宅ローン完済。子育て終了。定年近い夫、社会人2年目の息子と暮らす50代主婦。パソコン教室運営。

micel

micel

理系メーカーで5年間、社畜として飼われていましたが、副業で¥617円(時給¥200円くらいww)稼いで価値観が変わったサラリーマンの金錬ブログです。

ランキング

  1. 1

    【誰でもできる】TOSHIBA dynabookのSSD換装(クローン)方法を簡単解説します!

  2. 2

    【超簡単コピペでできる】Contact Form 7、送信ボタンの色変更方法!

  3. 3

    【ジャストカーテン】ヤマダ電機でオーダーカーテン購入

最近の記事 おすすめ記事 特集記事
  1. 【Flutter】syncfusion_flutter_calendarパッケージを使ってカレンダーを作成

  2. 【Flutter】Drawerでメニューリストを表示する

  3. 【Flutter】TabVarViewを使った画面の切り替え

  1. Apple信者が紹介するApple Watch SEの便利な使い方!

  2. 【超簡単コピペでできる】Contact Form 7、送信ボタンの色変更方法!

  3. 【誰でもできる】TOSHIBA dynabookのSSD換装(クローン)方法を簡単解説します!

  1. 屋根リフォーム実践体験記録!【オベロン屋根カバー工法】良かったこと、失敗したことを実体験からご紹介!

  2. 【屋根・外壁リフォーム】だまされるな!業者によっては数十万の差はあたりまえ。相見積調査を一挙紹介!

  3. 反ってしまった外壁の補修は張り替えしかないのか?

TOP