Flutter の Widget をコードを動かしながら学ぶ SliverAppBar編
Flutter は動画コンテンツも充実していて週毎にウィジェットを紹介している Flutter Widget of the Week では短い動画でウィジェットの概要を掴むことができる動画を視聴できます。
Flutter Widget of the Week を見るだけでも勉強になるのですが、記憶力が良くないので、視聴によるインプットだけでなく手元でコードを動かしてそれをブログ記事にする所までやって後から思い出しやすいようにしてみるシリーズです。
これまでの記事は以下のリンクから参照できます。
今回取り上げるのは SliverAppBar です。
Sliverとは
SliverとつくWidget群を使うことでスクロールをカスタマイズすることができます。Sliverについて自発的に調べるまでSilverと読んでいました……。ドキュメントを読むと参考リンクと動画へのリンクを参照するように案内されているのみで最初は扱いづらそうに感じていました。
ドキュメントで参照するよう案内されているのは以下の記事と動画です。
Flutter Widget of the WeekではSliverはスクロール可能領域の一部を表す細長い小片`と訳がついています。低レベルなインタフェースで実行中のスクロール可能領域上きめ細かいコントロールを提供します。
- 標準外の動作（スクロールすると消える、スクロールするとサイズや色が変わるなど）のアプリバーが欲しい。
- アイテムのリストとアイテムのグリッドを一つのユニットとして
効率よくスクロールする必要がある。 - ヘッダ付きのリストを折りたたむようなことをする
Sliver系のWidgetを使うのはこのような時で基本的なレイアウトを作る時にはSliverを使う必要はないと説明されています。(動画でもIt's not the simplest of our APIs.On the other hand, many people don't really need to know Slivers、this is advanced classと冒頭でいきなり話しています。)
## SliverAppBarについて
SliverAppBarのドキュメントはこちらです。
スクロールすると変化したり消えたりするアニメーションをAppBarで行いたい場合にSliverAppBarを使うと便利です。SliverAppBarは通常ScaffoldのappBarパラメータには使用されず、CustomScrollViewとともに使われます。
See the Pen SliverAppBarSample by Nobuyuki Tanabe (@nabeatsu) on CodePen.
codepenのサンプルコードです。SliverAppBarのスクロール効果を説明するためにSliverFixedExtentListというウィジェットを使っています。ListViewのSliver版であるSliverListを少し効率的にしたウィジェットです。main axisのextentを取得するために子をレイアウトをする必要がない分コストが少なく済みます。
floating、pinned、snap
floatingがユーザーがアプリバーに向かってスクロールするとすぐにアプリバーが表示されるようにするかどうかを表す真偽値です。pinnedがスクロールビューの開始時にアプリバーを表示したままにするかどうかを表す真偽値です。snapはfloatingがtrueである場合に有効で、trueの場合ヘッダがスクロール時に一気に最大表示されます。
この3つの値の組み合わせでスクロール時のアニメーションの効果が変わりますが、コードより、ドキュメントの動画比較がわかりやすいです。SliverAppBarのAnimated Examplesこれら3つのパラメータの組み合わせごとの動画が列強されています。
leading、title、actions
leading、titleにWidget、actionsにList<Widget>、bottomにPreferredSizeのサブクラスを指定することでそれぞれの領域にWidgetを設置できます。このサンプルコードは以下です。
See the Pen SliverAppBarSample2 by Nobuyuki Tanabe (@nabeatsu) on CodePen.
bottomパラメータについて
サンプルコードでも使用しているbottomパラメータについて、追加で説明します。bottomパラメータの型はPreferredSizeです。PreferredSizeのドキュメントはこちらです。AppBarの下に表示されるウィジェットで、ドキュメントによるとTabBarを想定されているものです。そのため、アプリバーの下部には動的にサイズが変更できないPreferredSizeWidget を実装したウィジェットのみが使用できます。
PreferredSizeウィジェットのサイズに関する説明はStack OverflowのProviderの作者の方の回答が参考になりました。
flexibleSpace、expandedHeight
flexibleSpaceパラメータに設定されたウィジェットはツールバーとタブバーの後ろにスタックされます。スクロールで最大限広がった時の高さはexpandedHeightで指定します。渡されたウィジェットの高さが全体の高さと等しくなります。動いているものを見る方がわかりやすいのでcodepen を以下に載せました。
See the Pen SliverAppBarSample4 by Nobuyuki Tanabe (@nabeatsu) on CodePen.
まとめ
SliverAppBarについて知る時にSliver自体に関してと、Sliverとつくその他のWidgetも一通り触ってから記事を書き始めたのでテーマの割に時間がかかってしまいました。何か誤りや認識のずれに気づかれた場合はコメントやTwitterにてご指摘頂けると幸いです。
