お久しぶりです。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なのかわからないと思いますので、以下に調べた内容を書いていきます。
成果物
下記のリポジトリを作成しました。
中には
- シンプルな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~~ウィジェットを見かけましたのでここにまとめておきます。
気になるウィジェットがありましたら調べてみて下さい。
まとめ
- とりあえず
top app barをいい感じにしたい場合はCustomScrollViewとSliverAppBarを使えばOK - 今時のアプリみたいにapp barをスクロールに合わせて閉じたり開いたりする場合は
SliverAppBar.floatingプロパティをtrueにすれば良い。 - 困ったらとりあえず
floating: trueだけしておけば良さそう。 - 展開時だけ
top app barの表示を変えたい場合はSliverAppBar.flexibleSpaceプロパティに展開時のウィジェットを設定する。
