【Flutter】SliverAppBarを触ってみた

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

# 目次
[SliverAppBarとは](##SliverAppBarとは)
[使い方](##使い方)
[参考](##参考)


## SliverAppBarとは

<iframe width="560" height="315" src="https://www.youtube.com/embed/R9C5KMJKluE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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


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

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

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

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

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

```dart
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,
            ),
          ),
        ),
      ],
    );
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/77fbf3e9-86d4-e703-2a18-1486bbedbf85.gif' width='300'>

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

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

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

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/093ad7c7-caae-810f-b283-55e8d6759d02.gif' width='300'>

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

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/0b4b8999-d41d-b8d1-fa4d-3e1b73362ae1.gif' width='300'>

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

```dart
 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,
            ),
          ),
        ),
```

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/10656b37-7c94-06e1-4cab-464611aeb555.gif' width='300'>

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


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

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/cc4ff3a4-e607-e3c5-8106-0e16e303d1b1.gif' width='300'>

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/c1fe42dc-fd1d-28f5-a1da-3514cb11c331.gif' width='300'>

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

<img src='https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2466417/7a7c9cb5-c8a2-76ce-1435-32e588068e37.gif' width='300'>

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

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

## 参考
https://api.flutter.dev/flutter/material/SliverAppBar-class.html

https://www.kindacode.com/article/flutter-sliverappbar/

https://youtu.be/R9C5KMJKluE