Flutter ClipRRect border radius not working on bottomNavigationBar

Question

I am trying to recreate a floating navigation bar from my swift app in flutter. For some reason, using the code below, there is still no borderRadius in th UI. I've tried changing colors, making the container transparent, and even using a container with boxDecoration. Nothing is adding a borderRadius to the UI. Are navigation bars not allowed to have a borderRadius in flutter? Here is my code:

class MyHome extends StatefulWidget {
  const MyHome({Key? key}) : super(key: key);

  @override
  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin {

  late TabController _tabController;

  @override
  void initState() {
    super.initState();
    _tabController = TabController(length: 5, vsync: this);
  }

  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: TabBarView(
        children: [
          HomeScreen(),
          HomeScreen(),
          HomeScreen(),
          HomeScreen(),
          HomeScreen()
        ],
        controller: _tabController
      ),
      bottomNavigationBar: Container(
        color: Colors.transparent,
        padding: EdgeInsets.all(15),
        child: ClipRRect(
          clipBehavior: Clip.hardEdge,
          borderRadius: BorderRadius.circular(50.0),
          child: Container(
            color: Colors.transparent,
            child: TabBar(
                labelColor: Colors.teal[200],
                unselectedLabelColor: Colors.blueGrey,
                indicator: UnderlineTabIndicator(
                    borderSide: BorderSide(color: Colors.teal),
                    insets: EdgeInsets.fromLTRB(50, 0, 50, 40)
                ),
                indicatorColor: Colors.teal,
                tabs: [
                  Tab(icon: Icon(Icons.home_outlined)),
                  Tab(icon: Icon(Icons.explore_outlined)),
                  Tab(icon: Icon(Icons.camera_alt_outlined)),
                  Tab(icon: Icon(Icons.movie_outlined)),
                  Tab(icon: Icon(Icons.person_outline))
                ],
                controller: _tabController),
          ),
        ),
      ),
    );
  }

seems to be working with your code sample, change the container color to see the difference. — Mahesh Jamdade, Dec 30 '21 at 04:03

score 1 · Accepted Answer · answered Dec 30 '21 at 03:56

1

I tried with your code by changing the outermost Container's color to Colors.transparent and this is the outcome I got. Is this the outcome of floating navigation bar that you are expecting? Perhaps you need to change the Scaffold's backgroundColor to have a better view of the border radius.

answered Dec 30 '21 at 03:56

emily

322
1
3
8

That is exactly what I am expecting to see... I did try setting the color of the outermost to transparent before. After just now trying it again, I am seeing that there is something else under it. After setting all the containers backgrounds to transparent, I am thinking that maybe there is automatically a background in the TabBarView to show the selected screen. I updated my question to show ALL the code for the navigator. – Globe Dec 30 '21 at 04:23
try adding extendBody: true to your Scaffold – emily Dec 30 '21 at 04:30

Flutter ClipRRect border radius not working on bottomNavigationBar

1 Answers1