Flutter Tabbarview underline color

You can just envolve the DefaultTabController with a Theme Widget and pass the color in indicatorColor in ThemeData.

Theme(
  data: ThemeData(
    indicatorColor: Colors.red,
  ),
  child: DefaultTabController(
    length: 2,
    child: Scaffold(
      appBar: AppBar(
        title: Text('Example =)'),
  

I know I'm answering late, but this will eventually help a lot of people. What you have to do is to follow the same thing which is mentioned in the decoration by @tomwyr

You don't have to make your own widget for that, just do this and there you go.

class CustomTabBarMenu extends StatefulWidget {
  @override
  _CustomTabBarMenuState createState() => _CustomTabBarMenuState();
}

class _CustomTabBarMenuState extends State<CustomTabBarMenu> 
with SingleTickerProviderStateMixin{

   TabController _controller;

   @override
   void initState() {
     // TODO: implement initState
     super.initState();
     _controller = new TabController(length: YOUR_LENGTH, vsync: this);
   }

   @override
   Widget build(BuildContext context) {
     return Column(
     crossAxisAlignment: CrossAxisAlignment.start,
     children: [
     Container(
      //This is responsible for the background of the tabbar, does the magic
      decoration: BoxDecoration(
        //This is for background color
        color: Colors.white.withOpacity(0.0),
        //This is for bottom border that is needed
        border: Border(bottom: BorderSide(color: Colors.grey, width: 0.8))),
        child: TabBar(
        controller: _controller,
        tabs: [
          ...
        ]
      )
    ),
    Container(
      height: MediaQuery.of(context).size.height/2.3,
      child: new TabBarView(
        controller: _controller,
        children: <Widget>[
          ...
        ],
      )
    )
  ]
);
}
}

RESULT

Required resultant


I haven't found any reference in the documentation about how to customize disabled indicator. However, you can build your own widget that will take additional decoration parameter:

class DecoratedTabBar extends StatelessWidget implements PreferredSizeWidget {
  DecoratedTabBar({@required this.tabBar, @required this.decoration});

  final TabBar tabBar;
  final BoxDecoration decoration;

  @override
  Size get preferredSize => tabBar.preferredSize;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned.fill(child: Container(decoration: decoration)),
        tabBar,
      ],
    );
  }
}

Then you can decorate your TabBar however you want:

appBar: AppBar(
  bottom: DecoratedTabBar(
    tabBar: TabBar(
      tabs: [
        // ...
      ],
    ),
    decoration: BoxDecoration(
      border: Border(
        bottom: BorderSide(
          color: Colors.blue,
          width: 2.0,
        ),
      ),
    ),
  ),
),

Which will result in desired behavior:

TabBar custom decoration


TabBar(
indicatorColor: Color(0xffF15C22),
unselectedLabelColor: Colors.black,
                labelColor: Color(0xffF15C22),
                tabs: [
                  Tab(text: "Tab 1"),
                  Tab(text: "Tab 2"),
                  Tab(text: "Tab 3"),
                ],
              ),

indicatorColor is the property which is helpful in changing the color of line in tab view

Tags:

Flutter