SliverPersistentHeader の使い方

SliverPersistentHeader の使い方

ヘッダに特化したSliverを定義するためのWidgetです。SliverAppBarが内部的に使用しています。 もっと凝った動きを表現したい場合、プリミティブなSliverPersistentHeaderを使用します。

このエントリーをはてなブックマークに追加

使い方

実際に表示する処理はSliverPersistentHeaderDelegateを継承したクラスに定義していく必要があります。

高さ180pxCardを表示する簡単な例は以下の通りです。

class _MySliverHeaderDelegate extends SliverPersistentHeaderDelegate {
  @override
  double get minExtent => 180;
 
  @override
  double get maxExtent => 180;

  @override
  bool shouldRebuild(covariant oldDelegate) => false;

  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(height: 180.0,
					 child: const Card(child: Center(child: Text('title'))));
  }
}

class MySliverHeader extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SliverPersistentHeader(delegate: _MySliverHeaderDelegate());
  }
}

このMySliverHeaderSliverListを使ってヘッダとリストを表示させようとすると次のようになります。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
	  body: CustomScrollView(
	    slivers: <Widget>[
		  SliverBoxHeader(),
		  SliverList(delegate: SliverChildBuilderDelegate((context, index) => Text("$index"))),
		]
	  ),
	);
  }
}

コンストラクタ

SliverPersistentHeader({
	Key key,
	@required SliverPersistentHeaderDelegate delegate,
	bool pinned: false,
	bool floating: false 
})

プロパティ

  • delegateSliverPersistentHeaderDelegate

    SliverPersistentHeaderDelegateに表示するレイアウトの定義して渡します。

  • floatingbool

    ヘッダの下に潜り込ませるかを指定します。

  • pinnedbool

    ヘッダを固定するかを指定します。

Flutter 公式ドキュメント

SliverPersistentHeader class

このエントリーをはてなブックマークに追加