flutter rounded corner bottom navigation bar

Question

I have a bottom navigation bar inside in ClipRRect (for giving rounded corner). It has rounded corners but no transparent corners. I am sharing image for showing the problem. How can i do transparent rounded corners?

Code:

bottomNavigationBar: ClipRRect(
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(30.0),
          topRight: Radius.circular(30.0),
        ),
        child: BottomNavigationBar(
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.amber[800],
          onTap: _onItemTapped,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
        ),
      ),

score 8 · Accepted Answer · answered May 12 '21 at 07:12

8

Try to reference to my answer, extendBody

Scaffold(
  extendBody: true,

answered May 12 '21 at 07:12

Jim

6,928
1
7
18

score 0 · Answer 2 · answered May 12 '21 at 07:13

0

try this in your theme

theme: ThemeData(
    canvasColor: Colors.transparent,)

answered May 12 '21 at 07:13

Ardeshir ojan

1,914
1
13
36

thanks, i tried this too but scaffold or other widgets don't have a "theme" field. – gurkan May 12 '21 at 07:22
it is in your material app – Ardeshir ojan May 12 '21 at 07:32

flutter rounded corner bottom navigation bar

2 Answers2