Flutter: Set edge color of the BottomAppBar()

Question

I have a BottomAppBar() widget

BottomAppBar(
      shape: CircularNotchedRectangle(),
      color: Colors.orange,
      notchMargin: 5,
      child:Container(),
    );

And, I want to set the edge color differently like the answer from this question.

How do I change Bottom App Bar Items Color?

I'd tried to set the color of the child Container(). However, it draws a straight line without the bump at the FloatingAppButton(). Is there any way that I can do this?

score 1 · Accepted Answer · answered Dec 04 '21 at 08:10

Do you want to like this, please check the below code

Source code

Scaffold(
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          backgroundColor: Colors.orange,
          onPressed: () {},
        ),
        bottomNavigationBar: BottomAppBar(
          shape: CircularNotchedRectangle(),
          notchMargin: 6,
          elevation: 30,
          child: new Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(icon: Icon(Icons.menu), onPressed: () {},),
              IconButton(icon: Icon(Icons.search), onPressed: () {},),
            ],
          ),
        ),
        appBar: AppBar(
          titleSpacing: 0,
          title: Text("Test"),
          backgroundColor: const Color(0xffFA7343),
        ),
        body: Container(
        ),
      )

Flutter: Set edge color of the BottomAppBar()

1 Answers1