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

Question

早上好。

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

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

由于flexibleSpace已包含内容，如何将渐变放在SliverAppBar上？我认为方法是在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

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