How to change the selected tab background colours in flutter

user_71213 0
Viewed 700

I would like to change the selected tabs background, i am going to have custom tabs so i cant change the background of the selected tabs using indicator: BoxDecoration

i would like to achieve the tabbar like this

enter image description here

please guide me to achieve the tabbars as like in the design. I am just started learning flutter.

tabbarcontroller flutter-layout flutter tabs
2 Answers

Is this what you are looking for ?

class TabBarExample extends StatefulWidget {
  @override
  _TabBarExampleState createState() => _TabBarExampleState();
}

class _TabBarExampleState extends State<TabBarExample>
    with SingleTickerProviderStateMixin {
  // Define a tab controller object
  TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: 3, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          color: Colors.grey[300],
          child: TabBar(
            controller: _tabController,
            indicatorColor: Colors.transparent,
            labelColor: Colors.pink,
            unselectedLabelColor: Colors.grey,
            labelStyle: TextStyle(
              fontSize: 16,
            ),
            unselectedLabelStyle: TextStyle(
              fontSize: 16,
            ),
            indicator: BoxDecoration(
              color: Colors.white,
            ),
            tabs: <Widget>[
              Tab(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('STEP 1'),
                    Text(
                      'Investment',
                      style: TextStyle(
                        fontSize: 12,
                      ),
                    ),
                  ],
                ),
              ),
              Tab(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('STEP 2'),
                    Text(
                      'Investment',
                      style: TextStyle(fontSize: 12),
                    ),
                  ],
                ),
              ),
              Tab(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text('STEP 3'),
                    Text(
                      'Investment',
                      style: TextStyle(fontSize: 12),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

OUTPUT:

enter image description here

user_134526400

For Unselected Tab Color: Wrap with ColoredBox and give your colour.

For Selected Tab Color: Give a BoxDecoration with your required colour as an indicator.

ColoredBox(
 /// Unselected tab color
 color: Colors.black,
 child: TabBar(
   /// Selected tab color
   indicator: BoxDecoration(color: Colors.white),
   tabs: const [
     Tab(text: 'A'),
     Tab(text: 'B'),
    ],
   ),
 )
user_28351290
Related