[Flutter] フレキシブルエリアとタブ付きのリッチなTabBarを作る
作るTabBarは
- leading, title, actionボタン等の基本パーツのある最上段
- 下スクロールで隠れるフレキシブルエリア
- スクロールしても隠れないタブバー
とする。
以下が参考になる。
https://www.developerlibs.com/2018/08/flutter-collapsing-toolbar-layout.html
ポイントとしては、
- SliverAppBarのflexibleSpace→backgroundにフレキシブルエリアのWidgetを入れる(スクロール時に伸縮する)
SliverAppBar(
pinned: true,
flexibleSpace: FlexibleSpaceBar(
title: //ここはスクロール後も残り続けるため、不適切
background: //ここが伸縮エリア,
),
leading: _buildLeading(),
actions: _buildActions(),
),
- SliverAppBarとSliverPersistentHeaderのpinnedをtrueにする (スクロール時に最上部に残り続ける)
ちなみに、グラデーション背景のAppBarを作れるパッケージであるgradient_app_barにはSliverGradientAppBar実装されており、背景をグラデーション化できる。