Flutter：如何在應用程序中滾動到頁面頂部時放大圖像？

Question

我有一個頁面，頂部有一個圖像，下面有一些其他小部件。 整個頁面是可滾動的。 有誰知道如何在滾動到頂部時放大圖像以創建類似於 Apple Music 中的效果？

在這里，您可以找到我正在嘗試創建的示例：

https://i.stack.imgur.com/MiYLZ.gif

Answer 1

嘗試使用 Sliver

final bannerHigh = 150.0;

return Scaffold(

      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            backgroundColor: Color(0xFF0084C9),
            leading: IconButton(
              icon: Icon(
                Icons.blur_on,
                color: Colors.white70,
              ),
              onPressed: () {
                Scaffold.of(context).openDrawer();
              },
            ),
            expandedHeight: bannerHigh,
            floating: true,
            pinned: true,
            flexibleSpace: FlexibleSpaceBar(
              title: Text("Your title",
                  style: TextStyle(
                      fontSize: 18,
                      color: Colors.white,
                      fontWeight: FontWeight.w600)),
              background: Image.network(
                'image url',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              <Widget>[

              ],
            ),
          ),
        ],
      ),
    );