Rounded corners with Customscrolview and SliverList / SliverAppBar in Flutter

Viewed 568

I'm working on an app in Flutter and want to have the following design of my SliverAppBar with the rounded corners to the bottom in my App. How can I do this when I use slivers?

Design rounded corner

I found the design on Dribbble from a YouTuber who created the app as a tutorial but without using a PageView with Slivers

This is a simplified version of the code I'm using:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: PageView(
          children: [
            CustomScrollView(
              slivers: <Widget>[
                SliverAppBar(
                  backgroundColor: Colors.red,
                  expandedHeight: 250.0,
                ),
                SliverList(
                    delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return Card(
                      child: ListTile(
                        title: Text('something'),
                      ),
                    );
                  },
                  childCount: 10,
                ))
              ],
            ),
          ],
        ),
      ),
    );
  }
}
1 Answers

use SliverPadding like this:

   DefaultTabController(
    child:NestedScrollView(
    headerSliverBuilder:
       (BuildContext context, bool innerBoxIsScrolled) {
   return [
        SliverPadding(
            padding: new EdgeInsets.only(top: 5.0),
            sliver: new SliverList(
            delegate: new SliverChildListDelegate(
            [YOR_WIDGET()]),
            ),
        );
    ]
Related