flutterdartandroid-bottomappbar

How to implement rounded bottomAppbar in flutter?


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

1

But it appears like this... Coded BottomAppBar:

2 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,
    ),
      )
    ); ```

Solution

  • 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
      ),