【Flutter】リストをスクロールするとTop app barが拡大・縮小されるサンプルを書いてみた【SliverAppBar】

お久しぶりです。pregum_foxです。

最近Flutterを触れていなかったので、便利だと思いつつ使ってなかったSliver関連についてサンプル漁っていました。

成果物として、アプリでよく見かける実装だけど実際どうやってるかわからなかった 下記の様なリストをスクロールすると、 画面上部の Top app bar も閉じたり開いたりするサンプルを作成しました。

目次です。

開発環境

項目	内容
Flutter Version	3.0.5

動作環境

端末名	version
Google Pixel 3a（emulator）	Android 12

やりたかったこと

この記事の最初にあった動画のように画面上部のTop app barをスクロールに合わせて動かすことです。 最近のアプリだと大体この挙動が取り入れられていて、表示領域が増えたりしてどうやれば実装できるかなと思い色々調べていました。

結論

動画の様な挙動にするにはSliverAppBar.floatingプロパティをtrueにすればOK

---

ただ、これだけだと何がOKなのかわからないと思いますので、以下に調べた内容を書いていきます。

成果物

下記のリポジトリを作成しました。

github.com

中には

• シンプルなsliver app bar のサンプルページ
• sliver app barの拡大・縮小の挙動に関連するプロパティを変更しながら確認できるサンプルページ

があります。

SliverAppBarについての解説

ここから下は２つ目の画面を使用してapp barの拡大・縮小関連のプロパティを解説していきます。

SliverAppBarについて、内部のプロパティを変えることで細かい挙動を変えることができたので、ここに確認できたことをまとめます。

• floatingプロパティ

  • このプロパティは、下にスクロールした際にtop app barを表示するアニメーションをトリガーするかどうかを決めています。（default: false）
    • trueの場合、アニメーションを行いtop app barが表示されます。
    • falseの場合、アニメーションを行わずtop app barは表示されません。

    下記にfloatingプロパティ変更時の挙動を映した動画を添付します。 youtube.com

• pinnedプロパティ

  • このプロパティは、下にスクロールした場合にtop app barを表示し続けるかどうかを決めます。（default: false）
    • trueの場合、表示し続けます。
    • falseの場合、スクロールに合わせて非表示になります。

    下記にpinnedプロパティ変更時の挙動を映した動画を添付します。 youtube.com

• snapプロパティ

  • このプロパティは、少しでもスクロールした時top app barを最大表示にするかどうかを決めます。（default: false）
    • trueの場合、最大表示にします。
    • falseの場合、スクロール量に応じて徐々に拡大・縮小されます。

  • 注意点として floatingプロパティ がfalseの時にsnapプロパティをtrueにすると、エラーになります ので注意してください。

    下記にsnapプロパティ変更時の挙動を映した動画を添付します。 youtube.com

• stretchプロパティ

  • このプロパティは、top app barのスクロール領域を超えて、引き延ばすかどうかを決めます。（default: false）
    • trueの場合、引き伸ばして表示されます。
    • falseの場合、引き延ばさず表示されます。
  • 検証時は、floatingプロパティがfalse の場合、表示中のSliverAppBarのstretchプロパティをsetStateで状態を変更しても反映されなかったので注意して下さい。
    • 初回表示時からstretchプロパティがfalseの場合は、floatingプロパティに関係なく反映されました。

    下記にstretchプロパティ変更時の挙動を映した動画を添付します。 youtube.com

• expandedHeightプロパティ

  • このプロパティは、展開された時の最大の高さを設定します。

    下記にexpandedHeightプロパティ変更時の挙動を映した動画を添付します。 youtube.com

• collapsedHeightプロパティ

  • このプロパティは、折り畳まれた時にtop app barされる高さを設定します。

    下記にcollapsedHeightプロパティ変更時の挙動を映した動画を添付します。 youtube.com

関連するウィジェット

今回使用しているSliver関連のウィジェットは面倒なので理解していないので説明できませんでしたが、色々Sliver~~ウィジェットを見かけましたのでここにまとめておきます。 気になるウィジェットがありましたら調べてみて下さい。

• FlexibleSpaceBar
  • SliverAppBar.flexibleSpaceプロパティに表示するウィジェット
    • このプロパティは、top app barが展開された時に表示するウィジェットを設定するプロパティです。
• SliverGrid
• SliverList
• SliverPadding
  • 他にもSliver[ウィジェット] がいくつかあり、APIリファレンス でSliverで検索すると出てきます。

まとめ

• とりあえずtop app bar をいい感じにしたい場合はCustomScrollViewとSliverAppBarを使えばOK
• 今時のアプリみたいにapp barをスクロールに合わせて閉じたり開いたりする場合はSliverAppBar.floating プロパティをtrueにすれば良い。
• 困ったらとりあえずfloating: trueだけしておけば良さそう。
• 展開時だけtop app barの表示を変えたい場合はSliverAppBar.flexibleSpaceプロパティに展開時のウィジェットを設定する。