【Widget of the Week】#11 SliverAppBar

【#11 SliverAppBar】動画

【#11 SliverAppBar】概要

Sliverとは?

SliverAppBarは特徴的なアプリバーを実装できる!

SliverAppBarの使い方

【#11 SliverAppBar】解説

①Sliverとは?

Sliver(細長い小片)とはスクロール可動領域の一部分を細かくカスタマイズできるウィジェット群です。

Sliverとつくウィジェットは複数あり、公式ドキュメントをみると解説動画が上がっています。

今回はその中の一つSliverAppBarを解説していきたいと思います。

※Sliver関連の情報をより詳しく知りたい方はこちら(公式ドキュメント)

②SliverAppBarは特徴的なアプリバー実装できる!

Scaffold内でAppBarウィジェットを使ってアプリバーの表示を行うパターンはよく見かけると思います。

AppBarウィジェットはシンプルで便利な分、カスタム性が低いためアプリバーがいつも同じような感じになってしまいますよね。

そこでSliverAppBarを使うと特徴的なアプリバーを実装することができます。

例えばスクロールすると消えたり、サイズや色が変わったりとAppBarではできない動きを加えることもできます。

では実際にどう使うのか解説していきたいと思います。

③SliverAppBarの使い方

  1. 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.

投稿者プロフィール

ArisawaRyoma
社会人歴2年目の駆け出しエンジニアです。

学生の時はがっつり文系(=遊んだただけ)でほぼPCに触れずに生きてきたので、プログラミングは日々勉強中。Vue / React / Django / Springなど色々浮気して今はFlutterにハマってます。

趣味は海外旅行、釣り、卓球など。

Twitterでも色々発信してるので良ければフォローお願いします。

関連記事

  1. 【Widget of the Week】#5 Opacity

  2. 【Widget of the Week】#10 Table

  3. 【Widget of the Week】#3 Wrap

  4. 【Widget of the Week】#6 FutureBuilde…

  5. flutter

    Flutterのすゝめ

  6. 【Widget of the Week】#4 AnimatedCont…