Flutter Tab background color in TabBar (multicolor tabbar)

Question

I am trying to do a multicolor TabBar, where every Tabs have a different background color.

I tried something to give an idea of what i am trying to achieve (but it is only "text background", I would like to have all the Tab background).

An Image of the actual result

import 'package:flutter/material.dart';

void main() {
  runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                ColoredBox(
                    color: Colors.red,
                    child: Tab(icon: Icon(Icons.directions_car))),
                ColoredBox(
                    color: Colors.green,
                    child: Tab(icon: Icon(Icons.directions_transit))),
                ColoredBox(
                    color: Colors.purple,
                    child: Tab(icon: Icon(Icons.directions_bike))),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

biruk IS biruk IS · Accepted Answer · 2021-03-14T16:32:50

declare color variable and assign it to appbar backgroung color

//declare color variable
Color color=Colors.blue;

//assign it to app bar background
appBar:AppBar(backgroundColor: color

//assign value on tab index changed
onindexchanged:(index){
if(index==1){
 
setState(() {
   color=Colors.green;
});

}
}

then on tab changed change the value of the color variable

Flutter Tab background color in TabBar (multicolor tabbar)

1 Answers