Use AppBar Style on a TabBar that is not its child - flutter

Question

I want my tab bar to have the same styling as the AppBar.
(using the same icon color, text color and background color)
My layout features a tabbed section to the left and another column to the right. Whithout additional styling the TabBar icons are not visible because both they and the background are white.
So what would be the most convinient way to apply the AppBar style to the TabBar? Thanks for any suggestions!
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatefulWidget {
#override
State<StatefulWidget> createState() => MyAppState();
}
class MyAppState extends State<MyApp> with TickerProviderStateMixin {
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(
vsync: this,
length: 3,
initialIndex: 0,
);
}
#override
Widget build(BuildContext context) {
double bigSize = IconTheme.of(context).size * 4.0;
return MaterialApp(
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Flutter TabBar Style Problem'),
),
body: Row(
children: <Widget>[
Expanded(
child: Column(
children: [
SizedBox(
height: 36.0,
child: TabBar(
controller: _tabController,
tabs: [
Tab(icon: Icon(Icons.cake)),
Tab(icon: Icon(Icons.train)),
Tab(icon: Icon(Icons.info)),
],
),
),
Flexible(
child: TabBarView(
controller: _tabController,
children: [
Icon(Icons.cake, size: bigSize),
Icon(Icons.train, size: bigSize),
Icon(Icons.info, size: bigSize),
],
),
),
],
),
),
Expanded(
child: Container(
color: Colors.amber.shade400,
alignment: FractionalOffset.center,
child: Text('Another Column'),
),
),
],
),
),
);
}
}

Answer 1

When you place a TabBar as the bottom: widget of the AppBar you get a lot of things for free. It gets the background color and a Material widget that has a special feature. It forces the indicator to use white color when the default indicator color is the same as the background color (give a look here).
So when you place a TabBar outside the AppBar you have to handle everything yourself.
But it seems pretty easy wrapping the TabBar in a Material and giving it the primaryColor (the same the framework does here).
So at the end is just replacing your SizedBox by a Material and setting the color. And you get the ink splash for free.
Material(
color: Theme.of(context).primaryColor,
child: TabBar(
controller: _tabController,
tabs: [
Tab(icon: Icon(Icons.cake)),
Tab(icon: Icon(Icons.train)),
Tab(icon: Icon(Icons.info)),
],
),
),

Answer 2

What appBar interally do is inserting a custom DefaultTextStyle that points to Theme.textTheme.title
You can do the exact same thing by wrapping a part of your widget tree into a custom DefaultTextStyle.
DefaultTextStyle(
style: Theme.of(context).textTheme.title,
child: Text('Title')
);
As for the background color, it is availble in another field of Theme.
Container(
color: Theme.of(context).primaryColor,
);

Answer 3

Change Your Code to Something Like This:
class ProductsAdminPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
// Scaffold is inside DefaultTabController because DefaultTabController needs access to Scaffold
return DefaultTabController(
// Number of tabs
length: 2,
child: Scaffold(
drawer: Drawer(
child: Column(
children: <Widget>[
AppBar(
automaticallyImplyLeading: false,
title: Text('Choose'),
),
ListTile(
title: Text('All Products'),
onTap: () {
Navigator.pushReplacement(context, MaterialPageRoute(builder: (BuildContext context) => ProductsPage()));
},
)
],
),
),
appBar: AppBar(
title: Text('Manage Products'),
// TabBar is added as the bottom widget of the appBar
bottom: TabBar(
tabs: <Widget>[
// No of Tab() Widgets Should be equal to length
Tab(
icon: Icon(Icons.create),
text: 'Create Product',
),
Tab(
icon: Icon(Icons.list),
text: 'My Products',
),
],
),
),
body: TabBarView(
// No of pages should be equal to length
children: <Widget>[ProductCreatePage(), ProductListPage()],
),
),
);
}
}

Answer 4

ThemeData(
appBarTheme: AppBarTheme(
...
),
tabBarTheme: TabBarTheme(
labelColor: Colors.black,
unselectedLabelColor: Colors.grey,
indicatorSize: TabBarIndicatorSize.label,
labelStyle: TextStyle(
fontSize: 20.0,
color: Colors.green,
),
unselectedLabelStyle: TextStyle(
fontSize: 20.0,
color: Colors.green,
),
),
);
We can customise theme in App Level theme as our app bar and then every where in app, tabs will use same style as we define in theme.
I hope it is the easiest approach...