如何将渐变添加到 SliverAppBar，但仅在它折叠时？

Question

早安。

我正在从 AppBar 更改为 SliverAppBar。原来的 AppBar 在flexibleSpace 中有一个渐变，但现在在 SliverAppBar 我需要将其他东西添加到灵活空间（用户照片和一些小部件）。所以当 SliverAppBar 折叠时，需要用我的渐变显示，但是当它展开时，需要显示用户照片等；当然，隐藏渐变。

看这里，我发布了一个带有条子的视频，但还没有渐变：https://drive.google.com/file/d/1DgHjAtrmTXjkb3HB7YrPo90kdFq7Wdao/view

如何在 SliverAppBar 上放置渐变，因为 flexibleSpace 已经有内容了？我认为这样做的方法是在 SliverAppBar 中使用 GlobalKey 来检查它是否折叠并将flexibleSpace代码更改为渐变。

但我不能，因为我不知道在全局键中使用哪种类型。

原创AppBar

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),
                                        ]
                                    )
                                ),
                              ),
                            ],
                        ),
                    ),
                ),