Flutter Custom SliverAppBar

Question

I would like to understand if there's a way to make the default sliver app bar in flutter to look more like this design I found online.

PS: I am familiar with the default way of doing this but to make use of flutter's extensively customizable widgets in this scenario seems to be the issue.

Here's what I've done. Can't seem to have a way to round the bottom edges or achieve the non-default sliver app bar behavior.

return SafeArea(
  child: Scaffold(
    body: CustomScrollView(
      slivers: [
        SliverAppBar(
          automaticallyImplyLeading: false,
          expandedHeight: height * 0.35,
          pinned: false,
          floating: true,
          leading: IconButton(
            onPressed: () => Navigator.pop(context),
            icon: Icon(
              Icons.chevron_left,
              color: Theme.of(context).primaryColor,
            ),
          ),
          flexibleSpace: FlexibleSpaceBar(
            background: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20.0), bottomRight: Radius.circular(20.0))
              ),
              child: Stack(
                children: [
                  Image.network(
                    'https://picsum.photos/200',
                    fit: BoxFit.cover,
                  ),
                  Container(
                    width: width,
                    height: height * 0.35,
                    color: Colors.redAccent,
                  ),
                ],
              ),
            )
          ),
        ),
        SliverFillRemaining(
          child: Column(
            children: List<int>.generate(6, (index) => index)
                .map((index) => Container(
                      height: 40,
                      margin: EdgeInsets.symmetric(vertical: 10),
                      color: Colors.grey[300],
                      alignment: Alignment.center,
                      child: Text('$index item'),
                    ))
                .toList(),
          ),
        )
      ],
    ),
  ),
);

Thanks.

Answer 1

One option that you can try is using a ContinuousRectangleBorder or RoundedRectangleBorder it will help you shape the corner of the SliverAppBar:

Example for ContinuousRectangleBorder

SliverAppBar(
  shape: ContinuousRectangleBorder(
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(30),
      bottomRight: Radius.circular(30),
      topLeft: Radius.circular(30),
      topRight: Radius.circular(30),
    ),
  ),
),

And will result in something like this:

RoundedRectangleBorder

SliverAppBar(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(20.0),
  ),
),