スクロールで隠れるバー Hide on Scroll
下へ読み進めると上下のバーが引っ込んで画面が広くなり、少しでも上へ戻すとすぐに出てくる。
本物の Flutter ウィジェットが動きます(初回は数秒かかります)
どんなもの?
SNS のタイムラインやブラウザで、読んでいる間だけ画面を広く使う工夫です。
上の見出しは SliverAppBar の floating: true と snap: true だけで実現できます。
下のナビゲーションは自動では隠れないので、UserScrollNotification でスクロールの向き(reverse=下へ読む)を見て、
AnimatedAlign の heightFactor を 0 ↔ 1 に切り替えて隠します。
こんなときに
- 長い一覧や記事を読む画面で、内容をできるだけ広く見せたい
避けたい場面
- 操作するためにバーを常に使う画面(隠れると押したいときに困る)
最小コード
NotificationListener<UserScrollNotification>(
onNotification: (n) {
if (n.direction == ScrollDirection.reverse) setState(() => visible = false);
if (n.direction == ScrollDirection.forward) setState(() => visible = true);
return false;
},
child: CustomScrollView(slivers: [
const SliverAppBar(floating: true, snap: true, title: Text('タイムライン')),
SliverList.builder(itemBuilder: ...),
]),
),
// bottomNavigationBar:
ClipRect(
child: AnimatedAlign(
duration: const Duration(milliseconds: 250),
alignment: Alignment.topCenter,
heightFactor: visible ? 1 : 0,
child: NavigationBar(...),
),
)使うウィジェット
SliverAppBarUserScrollNotificationAnimatedAlign