Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create unselected indicator for tab bar in Flutter

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

tab bar with unselected indicator

like image 898
Alexandre Fett Avatar asked Aug 26 '18 17:08

Alexandre Fett


People also ask

How do you set the unselected indicator color in Flutter?

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.

How do you create a 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.


2 Answers

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.

like image 171
dlohani Avatar answered Sep 19 '22 14:09

dlohani


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(),
              ),
            ],
          );

enter image description here

TabBar with an underline for unselected

Not exactly what you are looking for but it can give the underline for un-selected tab.

like image 29
andyng Avatar answered Sep 18 '22 14:09

andyng