Как добавить градиент в SliverAppBar, но только когда он свернут?

Question

Доброе утро.

Я перехожу с панели приложений на SliverAppBar. Исходный AppBar имеет градиент flexibleSpace, но теперь в SliverAppBar мне нужно добавить другие вещи в FlexibleSpace (пользовательское фото и некоторые виджеты). Поэтому, когда SliverAppBar сворачивается, нужно показать его с моим градиентом, но когда он развернут, нужно показать фотографию пользователя и т. Д .; и, конечно, скрыть градиент.

Посмотрите здесь, я разместил видео с работающей щепкой, но без градиента: https://drive.google.com/file/d/1DgHjAtrmTXjkb3HB7YrPo90kdFq7Wdao/view

Как поставить градиент на SliverAppBar, так как FlexibleSpace уже имеет контент? Я думаю, что для этого нужно использовать GlobalKey в SliverAppBar, чтобы проверить, не свернут ли он, и изменить код FlexibleSpace на градиент.

Но я не смог, потому что не знаю, какой тип использовать в глобальный ключ.

Оригинальная панель приложений

AppBar(
    title: Text('Meu Perfil'),
    flexibleSpace: Container(
        decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: <Color>[
                    Color(0xff0068b1),
                    Color(0xff0078C1),
                    Color(0xff008cd7),
                ],
            ),
        ),
    ),
    leading: IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: () => Navigator.pop(context),
    ),
)

SliverAppBar

SliverAppBar(
    title: Text("Meu Perfil"),
    expandedHeight: 264,
    pinned: true,
    flexibleSpace: FlexibleSpaceBar(
        collapseMode: CollapseMode.parallax,
        background: Container(
            color: Colors.white,
            child: Stack(
                children: <Widget>[
                    _userPhoto(),

                    _capturePhoto(),
                ],
            ),
        ),
    ),
    leading: IconButton(
        icon: Icon(Icons.arrow_back),
        onPressed: () => Navigator.pop(context),
    ),
)

Answer 1

Решено !!!

Вместо того, чтобы добавить градиент в FlexibleSpaceBar, решение было обернуто им в Container или DecoratedBox, поэтому, когда SliverAppBar раскрывается, содержимое FlexibleSpacebar перекрывает градиент ... и когда он свернулся, содержимое скрылось и покинул контейнер с градиентом ...

SliverAppBar(
   title: Text("Meu Perfil"),
   elevation: 10,
   expandedHeight: 264,
   pinned: true,
   flexibleSpace: DecoratedBox(
      decoration: BoxDecoration(
         gradient: LinearGradient(
            colors: <Color>[
               Color(0xff0068b1),
               Color(0xff0078C1),
               Color(0xff008cd7),
            ],
         ),
      ),
      child: FlexibleSpaceBar(
         collapseMode: CollapseMode.parallax,
         background: Container(
            color: Colors.white,
            child: Stack(
               children: <Widget>[
                  _userPhoto(),

                  _sliverAppBarBottom(),
               ],
            ),
         ),
      ),
   ),
   leading: IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () => Navigator.pop(context),
   ),
)

Answer 2

                SliverAppBar(
                    expandedHeight: 200.0,
                    floating: false,
                    pinned: true,
                    flexibleSpace: FlexibleSpaceBar(
                        centerTitle: true,
                        title: Text("Collapsing Toolbar", style: TextStyle(color: Colors.white, fontSize: 16.0, )),
                        background: Stack(
                            fit: StackFit.expand,
                            children: [
                              Image.network(
                                'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
                                fit: BoxFit.cover,
                              ),
                              DecoratedBox(
                                decoration: BoxDecoration(
                                    gradient: LinearGradient(
                                        begin: Alignment(0.0, 0.5),
                                        end: Alignment(0.0, 0.0),
                                        colors: [
                                          Color(0x60000000),
                                          Color(0x00000000),
                                        ]
                                    )
                                ),
                              ),
                            ],
                        ),
                    ),
                ),