【Flutter】SliverAppBarを触ってみた

今回はFlutterのSliverAppBarについて解説していきます。SliverAppBarを使うことによって簡単にスクロールする際のAppBarの挙動をカスタマイズすることが出来ます。

目次

SliverAppBarとは
使い方
参考

SliverAppBarとは

SliverAppBarとは、リッチなスクロールを実現するSliver群の一つで、AppBarの部分を担当します。使用する際にはCustomScrollViewのslivers内に書く必要があります。

CustomScrollView(
      slivers: [
        SliverAppBar()
      ],
    );

また、SliverAppBarは複数指定することが出来ます。

CustomScrollView(
      slivers: [
        SliverAppBar(),
        SliverAppBar(),
        SliverAppBar(),
      ],
    );

使い方

基本的にはexpandedHeightとflexibleSpaceを指定するだけで形になります。

プロパティ	説明
expandedHeight	AppBarが展開されたときの高さ
flexibleSpace	タイトルや画像などAppBarの内容に当たる部分

CustomScrollView(
      slivers: [
        SliverAppBar(
          expandedHeight: 200,
          flexibleSpace: FlexibleSpaceBar(
            title: const Text('SliverAppBar Sample'),
            background: Image.network(
              'https://images.unsplash.com/photo-1588099768550-4014589e03e0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774&q=80',
              width: double.infinity,
              fit: BoxFit.cover,
            ),
          ),
        ),
      ],
    );

上に持ち上げるとAppBarが良い感じに変わりますね。
その他使いそうなものを説明します。

プロパティ	型	説明
pinned	bool	スクロールした時にAppBarを表示させるかどうかを設定。
stretch	bool	AppBarをオーバースクロールした時に伸縮するかを設定
floating	bool	AppBarに向かってスクロールすると同時にAppBarを表示するするかどうかを設定
snap	bool	AppBarに向かってスクロールするとAppBarを完全に展開（floatingをtrueにする必要がある）

pinned

pinnedをtrueにするとスクロールした時にAppBarを上部に表示させたままにしてくれます。

stretch

stretchをtrueにするとAppBarを最大限まで伸ばすことが出来ます。

また、onStretchTriggerと組み合わせるとRefreshIndicatorと似たような動作を再現することが出来ます。

 SliverAppBar(
          onStretchTrigger: () async {
            await fetchCatImage();
          },
          stretch: true,
          expandedHeight: 200,
          flexibleSpace: FlexibleSpaceBar(
            title: const Text('SliverAppBar Sample'),
            background: Image.network(
              imageUrl,
              width: double.infinity,
              fit: BoxFit.cover,
            ),
          ),
        ),

（RandomCatという猫ちゃんの画像をランダムで返してくれるAPI使ってます）

floating

floatingをtrueにするとAppBar方向にスクロールした時にAppBarを表示してくれます。
左がfalseで右がtrueの状態です。

snap

snapを使用するにはfloatingをtrueにする必要があり、snapをtrueにするとAppBar方向にスクロールした時にAppBarを完全に展開してくれます。

ちょっとわかりづらいですね...

今回はSliversの中でもSliverAppBarの使い方を解説していきました。紹介した機能以外にも沢山機能があるみたいなので、これから色々と試してみたいと思います。

参考