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

Issue

Good Morning.

I’m changing from an AppBar to a SliverAppBar. The original AppBar has a gradient in flexibleSpace but now in SliverAppBar i need to add other stuffs to flexibleSpace (user photo and some widgets). So when SliverAppBar collapses, need to show it with my gradient, but when it’s expanded, need to show the user photo, etc; and of course, hide gradient.

Look here i posted a video with the sliver working, but without gradient yet: https://drive.google.com/file/d/1DgHjAtrmTXjkb3HB7YrPo90kdFq7Wdao/view

How do I put the gradient on SliverAppBar, since flexibleSpace already has content? I think the way to do is using a GlobalKey in the SliverAppBar to check if it is collapsed and change the flexibleSpace code to the gradient.

But I couldn’t because I don’t know which type to use in the global key.

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

Solution

Solved!!!

Instead add gradient in FlexibleSpaceBar, the solution was wrap it in a Container or DecoratedBox, So, when the SliverAppBar is expanded, the content of FlexibleSpacebar overwites the gradient… and whhen its collapsed, the content hides, and left the container with the gradient…

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

Answered By – Wemerson Guimaraes

Answer Checked By – Robin (FlutterFixes Admin)