Флаттер: как увеличить изображение при прокрутке вверх страницы в приложении?

Question

У меня есть страница с изображением вверху и другим виджетом внизу. Вся страница прокручивается. Кто-нибудь знает, как увеличить изображение при прокрутке вверх, чтобы создать эффект, похожий на тот, что в Apple Musi c?

Здесь вы найдете пример того, что я пытаюсь создать:

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>[

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