[Flutter]スクロールでAppBarを隠せるようにするには？

Flutter

2021.10.10

どうも、ちょげ(@chogetarou)です。

下にスクロールする時に、AppBarを隠せるようにするには、どうしたらいいのでしょうか？

方法
まとめ

方法

AppBarをスクロールで隠せるようにするには、Sliver（スリバー）AppBarを使います。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            floating: true,
            title: Text("Title"),
          ),
          SliverList(
              delegate: SliverChildListDelegate([
            for (var i = 0; i < 100; i++)
              ListTile(
                title: Text("item $i"),
              )
          ]))
        ],
      ),
    );
  }

SliverAppBarを使うには、まずCustomScrollViewを使います。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
            ・・・
      ),
    );
  }

CustomeScrollViewはSliverAppBarを使うために必要なウェジェットです。

そして、引数「slivers」の先頭に「SliverAppBar」を追加します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            floating: true,
            title: Text("Title"),
          ),
　　　　　　　　　・・・
        ],
      ),
    );
  }

下にスクロールした時だけ隠したい場合には、SliveAppBarの引数「floating」に「true」を指定します。

この引数に「true」を指定することで、下にスクロールした時だけAppBarが隠れるようになります。