How to implement rounded bottomAppbar in flutter?

Question

I want to create a rounded Bottomappbar like this one.
Rounded BottomAppBar:

But it appears like this... Coded BottomAppBar:

How do I get rid of that white portion?

    return ClipRRect(
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(25),
        topRight: Radius.circular(25),
        bottomRight: Radius.circular(25),
        bottomLeft: Radius.circular(25),
      ),
      child: Padding(
        padding: const EdgeInsets.only(bottom:20.0),
        child: BottomAppBar(
    
   shape: CircularNotchedRectangle(),
   child: new Row(
        
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        
        children: <Widget>[
          IconButton(
            icon: Icon(Icons.menu),
            color: Colors.white,
            onPressed: () {},
          ),
          IconButton(
            icon: Icon(Icons.search),
            color: Colors.white,
            onPressed: () {},
          ),
        ],
    ),
    color: Colors.blueGrey,
    ),
      )
    ); ```

score 4 · Answer 1 · answered Dec 07 '20 at 11:05

As @Jagadish suggested I used Shape: RoundedRectangleBorder to get rounded BottomAppBar. However to get notched bar I used:

    shape: AutomaticNotchedShape(
RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(25),
 ),
StadiumBorder(),
    ),
   ... //Codes=
  ),

This also gives a notch for Extended Floating Action Button and (I think) for Buttons with diff shapes.

score 3 · Accepted Answer · answered Dec 06 '20 at 01:16

3

App bar widget has a shape property and that's what you should use to get desired results, change your code to this

BottomAppBar(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(
        topLeft: Radius.circular(25),
        topRight: Radius.circular(25),
        bottomRight: Radius.circular(25),
        bottomLeft: Radius.circular(25),
      ),
    ),
   ... //Your codes
  ),

answered Dec 06 '20 at 01:16

Jagadish

1,005
11
30

Thanks! But I want to keep the Circular Notched rectangle as well with the floating button in center. So is it possible to set shape to RoundedRectangleBorder annd CircularNotchedRectangle at same time – Jayvardhan Patil Dec 07 '20 at 01:24
https://pub.dev/packages/convex_bottom_bar. Check out this...it may be helpful for you! If not tell me I will find another – Jagadish Dec 07 '20 at 03:51
1

I used shape: AutomaticNotchedShape( RoundedRectangleBorder(), StadiumBorder()). It did what I wanted. – Jayvardhan Patil Dec 07 '20 at 09:24

How to implement rounded bottomAppbar in flutter?

2 Answers2

Linked