SliverAppBarが効かない

Question

Flutterを学んでいます。

一番上までスクロールしたときに、ゴムのように伸びるのが『Sliver』の特徴かと思いますが、
スクロールが伸びずにカチッと終わってしまいます。

以下、コードです。
(※Windows10、Androidエミュレーター使用)

---

⓵CustomScrollView＞SliverAppBar・SliverList

class NextPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            centerTitle: true,
            title: Container(
                width: 150,
                height: 150,
                child: Image.asset('images/logo.jpg'),
            ),
            backgroundColor: Colors.white,
            elevation: 0,
　　　　　　　pinned: true,
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              List.generate(
                  5,
                  (int i) {
                    return _listItem(i);
                  }
              ),
            ),
          ),
        ],
      ),
    );
  }

⓶Widget _listItem(int i)

 Widget _listItem(int i) {
    return Container(
      height: 300,
      color: Colors.lightGreen,
      child: Column(
          children: <Widget>[
            Container(
                height: 200,
                child: Image.asset('images/shoes$i.jpg'),
            ),
            Text('allbirds Shoes orange'),
            Container(
              margin: EdgeInsets.only(left: 30, right: 30),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Icon(Icons.favorite_border),
                  Text(
                    '$149',
                    style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 30
                    ),
                  ),
                  Icon(Icons.shopping_cart),
                ],
              ),
            )
          ],
      ),
    );
  }
} //class NextPage

---

改めて申し上げますと、
SliverAppBarとSliverListにて、スクロールした際にバウンドしません。????
(Listが伸びない)

解決策を教えて頂けると嬉しいです。
お時間あるときにご返信いただければ、幸いです。

---

以下、スクリーンショットです。

Answer 1

どうやらiOSとAndroidでデフォルトの挙動に違いがあるようですね。
iOSの場合はそのままのコードでも希望する動きになりますが、Androidの場合はゴムのようには伸びず、薄青色の円弧が表示されるアニメーションになります。

CustomScrollView には physics プロパティがあるので、これをBouncingScrollPhysicsに指定してあげれば Android でも iOS と同様の挙動になります。

return Scaffold(
  body: CustomScrollView(
    physics: BouncingScrollPhysics(), // <-
    slivers: <Widget>[
      .
      .

あとせっかく SliverAppBar を使っているのに、expandedHeightが設定されていないようです。

SliverAppBar(
  expandedHeight: 150, // <-
  centerTitle: true,
    .
    .
```

もし上記の挙動を設定したいだけであれば`Sliver`を使う必要はなく、`CustomScrollView`の physics を設定するだけで実現できます。

[参考]
[https://medium.com/flutter-community/flutter-listview-and-scrollphysics-a-detailed-look-7f0912df2754](https://medium.com/flutter-community/flutter-listview-and-scrollphysics-a-detailed-look-7f0912df2754)
[https://api.flutter.dev/flutter/widgets/ScrollPhysics-class.html](https://api.flutter.dev/flutter/widgets/ScrollPhysics-class.html)

Comments

[kazuki_user]

本当にありがとうございました！
無事解決いたしました????

●CustomScrollViewに『physics: BouncingScrollPhysics()』を指定ですね????

ーーーーーーーーーーーーー

また、iOS・Androidでのデフォルトの挙動の違いに関してですが、
AppBarの件で未解決の別質問がございます。

VIEWが既に100人程付いているのですが、未解決の状態です。

唯でさえ恐縮ですので、本当にお時間あるときにご返信頂ければ十分です。????
(リンク⇒ https://teratail.com/questions/270216 )

では、失礼します。