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
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(
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