I created a custom indicator for tab bar using Decorator. I want to create a unselected indicator for not selected tabs in tab bar.
I did a container with custom decoration but current selected indicator draws behind container decoration.
new TabBar(
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
indicator: new CustomTabIndicator(),
tabs: [
new Container(decoration: new CustomTabInactive(),child: Tab(icon: Icon(Icons.person )))])
tab bar with unselected indicator
To change the text color for selected state, inside the TabBar widget, add the labelColor property and set the color. To change the text color for the unselected state, add the unselectedLabelColor parameter and change it colors.
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.
Instead of using container in tabs, try this (wrapping the TabBar with DecoratedBox and providing bottom border
DecoratedBox(
//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: [
...
],
),
)
Will not look exactly as you want, but will give underlined indication to unselected tabs.
You can use Stack/Container and TabBar together to make the underline
Stack(
fit: StackFit.passthrough,
alignment: Alignment.bottomCenter,
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(color: colorSecondary, width: 2.0),
),
),
),
TabBar(
isScrollable: true,
onTap: (index) => tabsModel.value = listTabsModel[index],
tabs: listTabsModel
.map(
(value) => Tab(
child: value.tabComponent,
),
)
.toList(),
),
],
);
TabBar with an underline for unselected
Not exactly what you are looking for but it can give the underline for un-selected tab.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With