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

Question

早上好。

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

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

既然 flexibleSpace 已经有内容了，如何在 SliverAppBar 上设置渐变？我认为要做的方法是在 SliverAppBar 中使用 GlobalKey 来检查它是否折叠并将 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

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

Answer 2

已解决！！！

而是在 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),
   ),
)

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

How can i add gradient to a SliverAppBar, but only when it's collapsed?

flutter

flutter-sliver

flutter-layout