👌

[Flutter]SliverList & SliverGrid

2022/11/15に公開

https://youtu.be/ORiTTaVY6mM

SliverList & SliverGrid

リストとグリッドをまとめてスクロールしたい場合や、別々にスクロールさせたいなど複雑なスクロール効果を加えたい場合に使える
Sliver : スクロール可能領域の一部、カスタムScrollViewの中に入る

SliverList

SliverList(
 delegate: SliverChildListDelegate(
  [
   widget,
   anotherWidget,
   yetAnotherWidget,
  ],
 ),
);

//or

SliverList(
 delegate: SliverChildBuilderDelegate(
  (BulidContext context, int index){
   return aWidget;
  }
 ),
);

SliverGrid

SliverGrid.count(
 children: ScrollItems,
 crossAxisCount: 4,
);

crossAxisCount: グリッドの横軸方向に対してのフォーマット 
.countの中で、グリッドの横方向のアイテム数を指定する

SliverGrid.extent(
 crossAxisExtent: 90.0,
);

extent()コンストラクタで、最大幅に指定した中に入るグリッドの数を決定する

Discussion