- 【#11 SliverAppBar】動画
- 【#11 SliverAppBar】概要
- 【#11 SliverAppBar】解説
- 【#11 SliverAppBar】サンプルコード①（基本的なプロパティ）
- 【#11 SliverAppBar】サンプルコード②（表示ウィジェットのカスタマイズ）
【#11 SliverAppBar】動画
【#11 SliverAppBar】概要
【#11 SliverAppBar】解説
①Sliverとは？
Sliver（細長い小片）とはスクロール可動領域の一部分を細かくカスタマイズできるウィジェット群です。
Sliverとつくウィジェットは複数あり、公式ドキュメントをみると解説動画が上がっています。
今回はその中の一つSliverAppBarを解説していきたいと思います。
※Sliver関連の情報をより詳しく知りたい方はこちら（公式ドキュメント）
②SliverAppBarは特徴的なアプリバー実装できる！
Scaffold内でAppBarウィジェットを使ってアプリバーの表示を行うパターンはよく見かけると思います。
AppBarウィジェットはシンプルで便利な分、カスタム性が低いためアプリバーがいつも同じような感じになってしまいますよね。
そこでSliverAppBarを使うと特徴的なアプリバーを実装することができます。
例えばスクロールすると消えたり、サイズや色が変わったりとAppBarではできない動きを加えることもできます。
では実際にどう使うのか解説していきたいと思います。
③SliverAppBarの使い方
- CustomScrollViewと一緒に使おう
SliverAppBarはCustomScrollViewと一緒に使用します。
動画ではこの部分をかなり省いているのでわかりにくくなっています。
そのため軽いサンプルコードを交えて実装方法の一例をご紹介しようと思います。
2. CustomScrollView内でSliverAppBarを使うサンプルコードを見てみよう
See the Pen
SliverAppBar1 by RyomaArisawa (@ryoma-arisawa)
on CodePen.
SliverAppBarはScaffoldのappBarプロパティのパラメータに通常は使用しません。
ScaffoldのbodyプロパティにCustomScrollViewを設定した上で、CustomScrollViewのsliversプロパティにリスト形式でウィジェットを並べていきます。
リスト形式でウィジェットを並べていく際、今回はSliverFixedExtentListも一緒に使用しています。
SliverFixedExtentListは子ウィジェットの高さをitemExtentプロパティで設定することができます。
また、childCountプロパティで子ウィジェットの表示制限を加えることもできます。
【#11 SliverAppBar】サンプルコード① （アニメーション）
①floating
型：bool
上方向にスクロールをした時にアプリバーをすぐ表示させることができる。②pinned
型：bool
下方向にスクロールをしていっても常にアプリバーを表示させておくことができる。③snap
型：bool
floatingがtrueの時にのみ使用可能。
上方向にスクロールするとアップバーをすぐに最大表示させることができる。①〜③のアニメーションの違いについては公式ドキュメントに動画が上がっているのでそちらを見るとわかりやすいと思います。
※ SliverAppBarの詳細はこちら（公式ドキュメント）
④〜⑤はアニメーションと直接関係はないが、サンプルコードで使用しているため解説する。
④expandedHeight
型：double
アプリバーの高さを設定できる。⑤flexibleSpace
型：Widget
ツールバーとタブバーの後ろに表示するウィジェットを設定できる。
See the Pen
SliverAppBar2 by RyomaArisawa (@ryoma-arisawa)
on CodePen.
【#11 SliverAppBar】サンプルコード②（表示ウィジェットのカスタマイズ）
①leading
型：Widget
ツールバーのタイトルの前面に表示するウィジェットを設定できる。②title
型：Widget
アプリバーの中で最前面に表示されるウィジェットを設定できる。③actions
型：titleに設定したウィジェットの後に横に並べて表示するウィジェットをリスト形式で設定できる。
④bottom
型：PreferredSizeWidget
アプリバーの最下部に表示するウィジェットを設定できる。
基本はタブバーを表示することを想定している。※サンプルコードで使用しているその他ウィジェットの公式ドキュメント
PreferredSize
TabBar
Tab
See the Pen
by RyomaArisawa (@ryoma-arisawa)
on CodePen.
投稿者プロフィール
-
社会人歴２年目の駆け出しエンジニアです。
学生の時はがっつり文系（＝遊んだただけ）でほぼPCに触れずに生きてきたので、プログラミングは日々勉強中。Vue / React / Django / Springなど色々浮気して今はFlutterにハマってます。
趣味は海外旅行、釣り、卓球など。
Twitterでも色々発信してるので良ければフォローお願いします。
