【日本語版】【Flutter】Widget of the Week – #11 SliverAppBar【要約】

動画

要約

  • SliverAppBarはスクロールすると見た目が変わるアニメーションヘッダー
  • 最初はimageの画像をヘッダーとして表示して、スクロールにより幅が狭くなると文字にする、のような表現が可能になる。

内容

スクロールしたときに見た目が変わる素敵なアニメーションヘッダー。
あなたはそれをアプリに付けたいと思ったことはないでしょうか?
 

SliverAppBarを使えば、それができます。

SliverAppBarはCustomScrollViewと共に利用することで、AppBarのスクロールの動きをカスタマイズすることができます。
 

sliverという言葉が馴染みのないものかもしれませんが、sliverはスクロール機能を実現するためのとても素晴らしいwidgetです。

sliverは、スクロール可能な領域の実装を細かく制御するためのベースレベルのインタフェースと考えることができます。

例えば、SliverAppBarであれば、どんなwidgetでもSliverAppBarのchildに渡せば、スクロールできるAppBarとして表示することができるようになります。
 

SliverAppBarはこのようなイメージで使われる。
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 一覧