💡

[Flutter] SliverAppBar

2022/11/01に公開約500字

https://youtu.be/R9C5KMJKluE

SliverAppBar

スクロールすると変化したり消えたりする、アニメーションヘッダーを実装可能に
CustomScrollView と共に使われ、アップバーにカスタムスクロール動作を加えることができる
slivers : スクロール可能領域の一部

CustomScrollView(
 slivers: <Widget>[
  SliverAppBar(
    floating: true,
   expandedHeight: 200.0,
   flexibleSpace: FlexibleSpaceBar(
    title: Text('SliverAppBar'),
   ),
  ),
  _oneSliver,
  _anotherSliver,
  _yetanotherSliver
 ],
);

expandedHeight
flexibleSpace
これら2つを設定し、最大サイズに拡張した時のAppBarの高さと外見を変えられる。

floating をtrue にすることで、リスト最上部に達しなくても、App Barが表示されるようになる

Discussion

ログインするとコメントできます