how to round BottomAppBar in flutter I want to Circle top left and top right like this

 bottomNavigationBar: BottomAppBar(
          color: Colors.green[200]?.withOpacity(0.8),
          child: Container(
            height: MediaQuery.of(context).size.height/9,
              child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.white),
                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(50))),
                ),
                onPressed: () {},
                child: Icon(
                  Icons.store,
                  color: Colors.black87,
                  size: 50,
                ),
              ),
              ElevatedButton(
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.white),
                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(50))),
                ),
                onPressed: () {},
                child: Icon(
                  Icons.home,
                  color: Colors.black87,
                  size: 50,
                ),
              ),
              ElevatedButton(
                style: ButtonStyle(
                  backgroundColor: MaterialStateProperty.all(Colors.white),
                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                      RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(50))),
                ),
                onPressed: () {},
                child: Icon(
                  Icons.settings,
                  color: Colors.black87,
                  size: 50,
                ),
              )
            ],
          )
),
        )

CodePudding user response：

You can use floating action button as bottom bar

CodePudding user response：

You can use ClipRRect like this :

 bottomNavigationBar: ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30.0),
          topRight: Radius.circular(30.0),
        ),
        child: BottomAppBar(
          color: Colors.green[200]?.withOpacity(0.8),
          child: Container(
              height: MediaQuery.of(context).size.height / 9,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.white),
                      shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(50))),
                    ),
                    onPressed: () {},
                    child: Icon(
                      Icons.store,
                      color: Colors.black87,
                      size: 50,
                    ),
                  ),
                  ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.white),
                      shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(50))),
                    ),
                    onPressed: () {},
                    child: Icon(
                      Icons.home,
                      color: Colors.black87,
                      size: 50,
                    ),
                  ),
                  ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.white),
                      shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: BorderRadius.circular(50))),
                    ),
                    onPressed: () {},
                    child: Icon(
                      Icons.settings,
                      color: Colors.black87,
                      size: 50,
                    ),
                  )
                ],
              )),
        ),
      ),

CodePudding user response：

wrap with ClipRRect and specify radius value for each corner:

  ClipRRect(
        borderRadius: const BorderRadius.only(
          bottomLeft: Radius.circular(0),
          bottomRight: Radius.circular(0),
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        ),
        child: BottomAppBar(
          color: Colors.green[200]?.withOpacity(0.8),
          child: Container(
              height: 60,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.white),
                      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                          RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(50))),
                    ),
                    onPressed: () {},
                    child: Icon(
                      Icons.store,
                      color: Colors.black87,
                      size: 50,
                    ),
                  ),
                  ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.white),
                      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                          RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(50))),
                    ),
                    onPressed: () {},
                    child: Icon(
                      Icons.home,
                      color: Colors.black87,
                      size: 50,
                    ),
                  ),
                  ElevatedButton(
                    style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.white),
                      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
                          RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(50))),
                    ),
                    onPressed: () {},
                    child: Icon(
                      Icons.settings,
                      color: Colors.black87,
                      size: 50,
                    ),
                  )
                ],
              )),
        ),
      )),