Search code examples
flutterflutter-layoutshadowtabbar

How to create shadow or elevation on TabBar?


enter image description here

I tried different options but unable to add the shadow like in the image:

TabBar(
        indicatorColor: Colors.transparent,
        indicatorSize: TabBarIndicatorSize.tab,
        unselectedLabelColor: inActiveColor,
        // Using BoxDecoration there is PADDING issue in Tabs 
         indicator: BoxDecoration(
           borderRadius: BorderRadius.circular(50),
           color: hexToColor(primaryColorDark),
           boxShadow: [
             BoxShadow(
               color: Colors.grey.withOpacity(0.5),
               spreadRadius: 10,
               blurRadius: 10,
               offset: Offset(0, 10), // changes position of shadow
             ),
           ],
         ),
        tabs: <Tab>[
          Tab(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(
                  Icons.create,
                  size: 20,
                ),
                Text('   ' + 'Form'),
              ],
            ),
          ),
          Tab(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(
                  Icons.remove_red_eye,
                  size: 20,
                ),
                Text('   ' + 'Preview'),
              ],
            ),
          ),
        ],
      ),

Solution

  • The best and easy solution, Just wrap the TabBar with Container with fix height like:

    enter image description here

             Container(
                height: 35,
                child: TabBar(
                  indicatorColor: Colors.transparent,
                  indicatorSize: TabBarIndicatorSize.tab,
                  unselectedLabelColor: inActiveColor,
    
                  indicator: BoxDecoration(
                    borderRadius: BorderRadius.circular(50),
                    color: Colors.blueAccent,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.blueAccent.withOpacity(0.3),
                        blurRadius: 25,
                        offset: Offset(0, 20), // changes position of shadow
                      ),
                    ],
                  ),
                  tabs: <Tab>[
                    Tab(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Icon(
                            Icons.create,
                            size: 20,
                          ),
                          Text('   ' + 'Form'),
                        ],
                      ),
                    ),
                    Tab(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Icon(
                            Icons.remove_red_eye,
                            size: 20,
                          ),
                          Text('   ' + 'Preview'),
                        ],
                      ),
                    ),
                  ],
                ),
              )