Styjun

Hi I'm still new to flutter and been studying it for about a week now, I'm currently creating an app that organizes funds for budgeting, I'm attempting to create a multi colored tab bar so users can easily identify their funds, I tried searching over the net and read the tab documentation but still no luck, any tips?

~edit

What I'm trying to achieve is to get the background color of each tab bar same as the background color of scaffold, the default background color of tab bar is currently grey, it should be red on the first tab, blue on second tab, yellow on third tab. is it possible?

here's a screenshot in the emulator:
screenshot

here are sample of my code:

/main.dart

import 'package:flutter/material.dart';
import './FirstTab.dart' as first;
import './SecondTab.dart' as second;
import 'ThirdTab.dart' as third;

void main()
 runApp(new MaterialApp(
 home: new MyTabs()
 ));


class MyTabs extends StatefulWidget
 @override
 MyTabsState createState() => new MyTabsState();


class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin 


 TabController controller;

 @override
 void initState()
 super.initState();
 controller = new TabController(vsync: this, length: 3);
 

 @override
 void dispose() 
 controller.dispose();
 super.dispose();
 

 @override
 Widget build(BuildContext context) 
 return new Scaffold(
 appBar: new AppBar(
 title: new Text('Multi Colored Tab Bar'),
 backgroundColor: Colors.grey,
 bottom: new TabBar(
 controller: controller,
 tabs: <Tab>[
 new Tab(text: 'First Tab'),
 new Tab(text: 'Second Tab'),
 new Tab(text: 'Third Tab'),
 ],
 ),
 ),
 body: new TabBarView(
 controller: controller,
 children: <Widget>[
 new first.First(),
 new second.Second(),
 new third.Third(),
 ],
 ),
 );
 

/FirstTab.dart

import 'package:flutter/material.dart';

class First extends StatelessWidget
 @override
 Widget build(BuildContext context)
 return new Scaffold(
 backgroundColor: Colors.red
 );
 

/SecondTab.dart

import 'package:flutter/material.dart';

class Second extends StatelessWidget
 @override
 Widget build(BuildContext context)
 return new Scaffold(
 backgroundColor: Colors.blue
 );
 

/ThirdTab.dart

import 'package:flutter/material.dart';

class Third extends StatelessWidget
 @override
 Widget build(BuildContext context)
 return new Scaffold(
 backgroundColor: Colors.yellow
 );
 

The below will automatically set the Scaffold color on load and the tabs reflect the appropriate default colors.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
 @override
 Widget build(BuildContext context) 
 return MaterialApp(
 home: TabBarApp(),
 );
 


class TabBarApp extends StatefulWidget 
 createState() => _TabBarAppState();


class _TabBarAppState extends State<TabBarApp>
 with SingleTickerProviderStateMixin 
 TabController _controller;
 List<TabData> _tabData;
 List<Tab> _tabs = [];
 List<Widget> _tabViews = [];
 Color _activeColor;

 @override
 void initState() 
 super.initState();
 _tabData = [
 TabData(title: 'First Tab', color: Colors.red),
 TabData(title: 'Second Tab', color: Colors.green),
 TabData(title: 'Third Tab', color: Colors.blue),
 ];
 _activeColor = _tabData.first.color;
 _tabData.forEach((data) 
 final tab = Tab(
 child: Container(
 constraints: BoxConstraints.expand(),
 color: data.color,
 child: Center(
 child: Text(data.title),
 ),
 ),
 );
 _tabs.add(tab);

 final widget = Scaffold(backgroundColor: data.color);
 _tabViews.add(widget);
 );
 _controller = TabController(vsync: this, length: _tabData.length)
 ..addListener(() 
 setState(() 
 _activeColor = _tabData[_controller.index].color;
 );
 );
 

 @override
 void dispose() 
 _controller?.dispose();
 super.dispose();
 

 @override
 Widget build(BuildContext context) 
 return Theme(
 data: ThemeData(primaryColor: _activeColor),
 child: Scaffold(
 backgroundColor: _activeColor,
 appBar: AppBar(
 title: Text('Multi Colored Tab Bar'),
 bottom: TabBar(
 indicatorColor: _activeColor,
 labelPadding: EdgeInsets.zero,
 controller: _controller,
 tabs: _tabs,
 ),
 ),
 body: TabBarView(
 controller: _controller,
 children: _tabViews,
 ),
 ),
 );
 


class TabData 
 TabData(this.title, this.color);

 final String title;
 final Color color;

Yes it is possible try this

import 'package:flutter/material.dart';
import './FirstTab.dart' as first;
import './SecondTab.dart' as second;
import 'ThirdTab.dart' as third;

void main()
 runApp(new MaterialApp(
 home: new MyTabs()
 ));


class MyTabs extends StatefulWidget
 @override
 MyTabsState createState() => new MyTabsState();


class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin 


 TabController controller;
 int tabIndex =0 ;

 @override
 void initState()
 super.initState();
 controller = new TabController(vsync: this, length: 3);
 

 @override
 void dispose() 
 controller.dispose();
 super.dispose();
 

 @override
 Widget build(BuildContext context) 
 return new Scaffold(
 appBar: new AppBar(
 title: new Text('Multi Colored Tab Bar'),
 backgroundColor: Colors.grey,
 bottom: new TabBar(
 controller: controller,
 indicator: BoxDecoration(color: setColor(tabIndex)),
 onTap: (index)
 setState(() 
 tabIndex = index;
 );
 ,
 tabs: <Tab>[
 new Tab(text: 'First Tab'),
 new Tab(text: 'Second Tab'),
 new Tab(text: 'Third Tab'),
 ],
 ),
 ),
 body: new TabBarView(
 controller: controller,
 children: <Widget>[
 new first.First(),
 new second.Second(),
 new third.Third(),
 ],
 ),
 );
 

 setColor(int tabIndex)
 if(tabIndex == 0)
 return Colors.red;
 else if(tabIndex == 1)
 return Colors.blue;
 else if(tabIndex == 2)
 return Colors.yellow;
 
 

I got it working by changing primaryColor in theme of MaterialApp, colour of Tab can be changed. So inside build method of MyTabsState return a MaterialApp & set it's theme to a variable currentTabColor.

Declare currentTabColor in MyTabsState & set it to Colors.red

Then set onTap to a callback which returns index of current tab & change state of currentTabColor using if..else

import 'package:flutter/material.dart';

void main() 
 runApp(MyTabs());


class MyTabs extends StatefulWidget 
 @override
 MyTabsState createState() => MyTabsState();


class MyTabsState extends State<MyTabs> with SingleTickerProviderStateMixin 
 TabController controller;
 Color currentTabColor;

 @override
 void initState() 
 super.initState();
 currentTabColor = Colors.red;
 controller = TabController(vsync: this, length: 3);
 

 @override
 void dispose() 
 controller.dispose();
 super.dispose();
 

 @override
 Widget build(BuildContext context) 
 return MaterialApp(
 theme: ThemeData(
 primaryColor: currentTabColor,
 ),
 home: Scaffold(
 appBar: AppBar(
 title: Text('Multi Colored Tab Bar'),
 bottom: TabBar(
 onTap: (tabIndex) 
 if (tabIndex == 0)
 currentTabColor = Colors.red;
 else if (tabIndex == 1)
 currentTabColor = Colors.blue;
 else
 currentTabColor = Colors.green;
 setState(() 
 currentTabColor = currentTabColor;
 );
 ,
 controller: controller,
 tabs: <Tab>[
 Tab(
 text: 'First Tab',
 ),
 Tab(text: 'Second Tab'),
 Tab(text: 'Third Tab'),
 ],
 ),
 ),
 body: TabBarView(
 controller: controller,
 children: <Widget>[
 Scaffold(backgroundColor: Colors.red),
 Scaffold(backgroundColor: Colors.blue),
 Scaffold(backgroundColor: Colors.green),
 ],
 ),
 ),
 );
 

Output