Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I clip the edges of my tab bar container in flutter?

Tags:

I have a container at the bottom of my screen that has a BottomNavigationBar. I want the container to get the colour of my background. Even after adding CLipRRect it wasn't getting corrected. I also tried to make the container transparent but it showed me an error where I couldn't assign a colour to my container and give it a boxDecoration.I want the excess white part to merge into my background.

//edited

How do I get rid of the shadow from the background?

Widget _bottomNavigationBar(int selectedIndex) => ClipRect(
    child: Container(
        height: 80,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.all(Radius.circular(52.0)),
          boxShadow: <BoxShadow>[
            BoxShadow(
                color: Colors.grey.withOpacity(0.3),
                offset: const Offset(0.0, 0.0),
                blurRadius: 52.0),
          ],
        ),
        child: ClipRRect(
          borderRadius: BorderRadius.only(
              topLeft: Radius.circular(52.0),
              topRight: Radius.circular(52.0)),
          child: BottomNavigationBar(
            selectedItemColor: Color(0xFFFE524B),
            unselectedItemColor: Color(0xFFFF8C3B),
            onTap: (int index) => setState(() => _selectedIndex = index),
            currentIndex: selectedIndex,
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.home,
                    size: 30,
                  ),
                  title: Text('')),
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.game_controller,
                    size: 30,
                  ),
                  title: Text('[![enter image description here][1]][1]')),
              BottomNavigationBarItem(
                  icon: Icon(
                    Entypo.wallet,
                    size: 30,
                  ),
                  title: Text('')),
            ],
          ),
        )),
  );
like image 760
Simran Aswani Avatar asked Jan 03 '20 13:01

Simran Aswani


People also ask

How do you remove spaces between tabs in Flutter?

Just by adding isScrollable: true parameter to TabBar() all tabs shrink to one side. Without setting isScrollable: true all tabs items were taking all the space they have in the given widget. Save this answer.

How do you use the TabBar in Flutter?

You can create tabs using the TabBar widget. In this example, create a TabBar with three Tab widgets and place it within an AppBar . return MaterialApp( home: DefaultTabController( length: 3, child: Scaffold( appBar: AppBar( bottom: const TabBar( tabs: [ Tab(icon: Icon(Icons. directions_car)), Tab(icon: Icon(Icons.


1 Answers

This is actually not a problem with the bottom navigation bar. You need to set "extendBody" to "true" for the parent Scaffold widget. This will extend the scaffold body content all the way down to the bottom of the screen!

Scaffold(
  extendBody: true,
  bottomNavigationBar: _bottomNavigationBar(selectedIndex),
);
like image 159
dshukertjr Avatar answered Sep 30 '22 20:09

dshukertjr