動画
要約
- SliverAppBarはスクロールすると見た目が変わるアニメーションヘッダー
- 最初はimageの画像をヘッダーとして表示して、スクロールにより幅が狭くなると文字にする、のような表現が可能になる。
内容
スクロールしたときに見た目が変わる素敵なアニメーションヘッダー。
あなたはそれをアプリに付けたいと思ったことはないでしょうか？
SliverAppBarを使えば、それができます。
SliverAppBarはCustomScrollViewと共に利用することで、AppBarのスクロールの動きをカスタマイズすることができます。
sliverという言葉が馴染みのないものかもしれませんが、sliverはスクロール機能を実現するためのとても素晴らしいwidgetです。
sliverは、スクロール可能な領域の実装を細かく制御するためのベースレベルのインタフェースと考えることができます。
例えば、SliverAppBarであれば、どんなwidgetでもSliverAppBarのchildに渡せば、スクロールできるAppBarとして表示することができるようになります。
SliverAppBarは様々なwidgetをスクロールできるAppBarとして表示するためのインターフェース
flexibleSpaceパラメータとextendedHeightパラメータを指定することで、フルサイズに拡大されたときに、AppBarの高さと見た目を変えることができます。
もしアプリがスクロールダウンされているときにも、AppBarを表示させたい場合は、floatingパラメーターにtrueを指定してください。
まとめ
Widget of the Weekの#11 SliverAppBarの日本語翻訳版でした。
スクロールの際、SliverAppBarは一定の高さまで小さくなってくれるので、下のコンテンツの表示領域を広く確保することができます。
画像など、高さがあるコンテンツをヘッダーとして表示する場合に相性が良さそうです。
ここまで読んでくださってありがとうございました！
もしこの記事が役に立ったという方は是非、シェアをお願いします！
twitterでもFlutterの情報を発信しているので、こちらも是非フォローお願いします！（@potapota)
■ 次の記事はこちら
#12 – SliverList & SliverGrid
■Widget of the Week まとめ
Widget of the Week 一覧