Rounded bottom of sliverAppBar

Question

I want to round the bottom of my sliverAppBar like this:

but I can't... this is my code:

Scaffold(
    body: NestedScrollView(
        controller: _scrollController,
        headerSliverBuilder: (BuildContext context, bool boxIsControlled) {
          return <Widget>[
            SliverAppBar(
              
              title: null,
              expandedHeight: MediaQuery.of(context).size.height*0.35,
              floating: true,
              pinned: false,
              snap: true,
              flexibleSpace: Stack(
                children: <Widget>[
                  Positioned.fill(
                      child: Image(
                    image: AssetImage('assets/cafe1.png'),
                    fit: BoxFit.cover,
                  ))
                ],
              ),
            ),
          ];
        },
        body: SingleChildScrollView(
          child: Container(
               ...
        ))));

This is my result now:

:(

Answer 1

Add this to SliverAppBar.

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

Answer 2

You can make a similar result using DraggableScrollableSheet in a Stack. Example as gif

Stack(
        children: [
          Image(
            width: double.infinity,
            image: NetworkImage("https://picsum.photos/200/300"),
            fit: BoxFit.contain,
          ),
          DraggableScrollableSheet(
              maxChildSize: 0.75,
              minChildSize: 0.2,
              builder: (context, scrollController) {
                return Container(
                  padding: EdgeInsets.symmetric(horizontal: 20),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.vertical(
                          top: Radius.circular(30))),
                  child: SingleChildScrollView(
                    controller: scrollController,
                    child: Column(
                      children: [
                        MovieTitle(),
                        BadgesList(),
                        RatingContainer(),
                        DirectorText(),
                        SizedBox(height: 30),
                        ActorContianer(),
                        Introduction(),
                      ],
                    ),
                  ),
                );
              })
        ],
      ),