How to create a custom stack in sliver appear in flutter?

Question

Hi Everyone I am creating a profile page for a flutter app.

The SliverAppBar needs to show the below view when in the expanded state:

And below view when the user scrolls the silver list.

As you see this is a custom stack that I can create.

I don't know how to do it in slivers in a flutter.

Any links would also be highly appreciated to learn in-depth about flutter and slivers especially.

Code for the collapsed stack:

             Stack(
                  alignment: Alignment.topRight,
                  children: <Widget>[
                    Container(
                        margin: EdgeInsets.only(top: 12),
                        width: 2000,
                        height: 80,
                        decoration: BoxDecoration(boxShadow: [
                          BoxShadow(blurRadius: 5.0, color: Colors.black87)
                        ])),
                    Container(
                      margin: EdgeInsets.only(right: 20, top: 5),
                      decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          boxShadow: [
                            BoxShadow(blurRadius: 5.0, color: Colors.black87)
                          ],
                          border: Border.all(color: Colors.cyan, width: 3.0)),
                      child: CircleAvatar(
                        backgroundImage: AssetImage(
                            "assets/images/food/avocado-f.jpg"),

                        radius: 50,
                      ),
                    )
                  ],
                ),

score 2 · Answer 1 · answered Jan 06 '20 at 09:30

You should use SliverPersistentHeader and create your own SliverPersistentHeaderDelegate.

In the build method you add your Stack view and you can use Transform or SizedBox to scale and transform the circle depending on the height of the header.

There is a nice tutorial that explains how to use this widget https://medium.com/flutter-community/how-to-code-a-dynamic-header-in-flutter-e171ec2231bf

How to create a custom stack in sliver appear in flutter?

1 Answers1