個人開発者が勉強がてらまとめているだけのサイトです

スクロールで隠れるバー Hide on Scroll

下へ読み進めると上下のバーが引っ込んで画面が広くなり、少しでも上へ戻すとすぐに出てくる。

別名
スクロールで消えるヘッダー隠れるナビゲーションフローティングAppBarQuick ReturnAuto-hide Toolbar
動き
下へ読むと隠れる少し戻すと出る上下にスライド
作り方
標準ウィジェット Flutter に入っているものだけで作れます

本物の 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

似ているもの・一緒に見たいもの

触ってみる ↗
ナビゲーション スクロールで縮む見出しCollapsing App Bar

最初は大きな画像と見出しが出ていて、上にスクロールすると縮んで普通の細い見出しになって上に残る。

スクロールで縮む