CODEWITHSUNDEEP
dartflutter
Tiziano Munegato
Tiziano Munegato

Reputation: 929

Flutter - Rounded corners in SliverAppBar

In Flutter you can have custom shape in AppBar widget with shape property, but this property is missing in SliverAppBar widget

  AppBar(
    title: Text('Hello'),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(
        bottom: Radius.circular(30),
      ),
    ),
  ),

how to have rounded corners in SliverAppBar?

enter image description here

Upvotes: 23

Views: 31649

Answers (6)

Yasmin Ali
Yasmin Ali

Reputation: 121

appBar: AppBar(
    shape: ContinuousRectangleBorder(
        borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(100),
            bottomRight: Radius.circular(100))),
  ),

Upvotes: 0

Saeed Dai Alnoor
Saeed Dai Alnoor

Reputation: 25

this property is not missing in SliverAppBar widget it's like AppBar Widget but you don't need to 'appBar:' property in Scaffold Widget, you need 'body:' property and on it you must add CustomScrollView Widget, and in 'slivers:' property you can add list of Widgets starting from SliverAppBar, and as you like you can add SliverList, SliverGrid, I tried that and it's done, this is my code.

Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: 180,
            title: Text('RoundedRectangleBorder'),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.vertical(
                bottom: Radius.circular(40),
              ),
            ),
          ),
        ],
      ),
    );

Upvotes: -2

shazawdidi
shazawdidi

Reputation: 1

 SliverOverlapAbsorber(
                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                        context),
                    sliver: SliverAppBar(
                      pinned: true,
                      stretch: true,
                      automaticallyImplyLeading: false,
                      expandedHeight: 180,
                      flexibleSpace: FlexibleSpaceBar(
                        stretchModes: const <StretchMode>[
                          StretchMode.zoomBackground,
                          StretchMode.blurBackground,
                        ],
                        background: Stack(
                          children: [
                            CustomImage(
                              path: "assets/images/profile.png",
                              width: MediaQuery.of(context).size.width,
                              fit: BoxFit.fill,
                            ),
                            Container(
                              color: iconGreyColor.withOpacity(0.2),
                            ),
                            Positioned(
                                bottom: 50,
                                child: Row(
                                  children: [
                                    CustomImage(
                                      path: "assets/images/notification.png",
                                    ),
                                    Icon(Icons.message),
                                    Icon(Icons.search)
                                  ],
                                ))
                          ],
                        ),
                      ),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.vertical(
                          bottom: Radius.circular(30),
                        ),
                      ),
                    ))

Upvotes: 0

Den
Den

Reputation: 1725

If someone need to add bottom border corners with SliverPersistentHeader

In the delegate:

Container(
  clipBehavior: Clip.hardEdge,
  decoration: BoxDecoration(
    borderRadius: const BorderRadius.vertical(bottom: Radius.circular(15.0)),
  ),
  child: Image()
)

Upvotes: 3

Simran Singh
Simran Singh

Reputation: 2869

This is the right and easy way to change the shape of a SliverAppBar (As mentioned in Flutter docs). No need you use any tricks. Even you can shape it as any shape you want.

SliverAppBar(
  shape: ContinuousRectangleBorder(
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(30), bottomRight: Radius.circular(30))),
  title: Text('Sliver AppBar'),
);

Upvotes: 31

Vishal G. Gohel
Vishal G. Gohel

Reputation: 1033

I achieved this kind of design using BorderRadius widget.

Container(
        height: 75.0,
        child: Center(child: new Text("Hello",
          textAlign: TextAlign.center,
          style: TextStyle(
            height: 2.5,
            color: Colors.white,
            fontSize: 18.0,
          ),
        )),
        decoration: new BoxDecoration(
          color: Colors.blue,
          boxShadow: [new BoxShadow(blurRadius: 3.0)],
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(19.0)),
        ),
      ),

enter image description here

This will not give you parallax scroll functionality

Upvotes: 1

Related Questions