Widget not updating its colorScheme with global ThemeData - flutter

Question

The app app here loads a tabbed simple app with a scaffold, app bar, and bottomNavigationBar which is set as a TabBar.
When set at the bottomNavigationBar, the TabBar becomes white so I've overridden its background color using a Container widget.
While the rest of my app will change its color palette as expected, however it doesn't for my TabBar. Using Theme.of(context) to get the primary color doesn't work either, as the Theme's color scheme doesn't seem to change at all.
I've attached pictures of the problem too.
theme: ThemeData.light()
theme: ThemeData.dark()
Notice how the whole app except the bottom TabBar reflects these changes happily.
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
#override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sereal',
theme: ThemeData(primarySwatch: Colors.indigo),
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: const Text('App'),
),
bottomNavigationBar: Container(
color: Theme.of(context).primaryColor,
child: const TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.calendar_today),
text: 'Planner',
),
Tab(
icon: Icon(Icons.amp_stories),
text: 'Cards',
),
Tab(
icon: Icon(Icons.auto_stories),
text: 'Notes',
),
],
),
),
body: const TabBarView(
children: <Widget>[CardsView(), NotesView(), PlannerView()],
)),
));
}
}

Answer 1

1: make the DefaultTabController in a separate widget.
2: add these properties to the MaterialApp widget:
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.indigo,
),
darkTheme: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.indigo,
),
themeMode: ThemeMode.light,
3: instead of wraping the TabBar with a Container, wrap it with a Material widget
this is the main file code :
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.indigo,
),
darkTheme: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.indigo,
),
themeMode: ThemeMode.light,
home: const HomePage(),
);
}
}
this is the homepage code:
import 'package:flutter/material.dart';
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: const Text('App'),
),
bottomNavigationBar: Material(
color : Theme.of(context).primaryColor,
child: TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.calendar_today),
text: 'Planner',
),
Tab(
icon: Icon(Icons.amp_stories),
text: 'Cards',
),
Tab(
icon: Icon(Icons.auto_stories),
text: 'Notes',
),
],
),
),
body: const TabBarView(
children: <Widget>[CardsView(), NotesView(),PlannerView()],
)),
);
}
}
.................
this is how it looks when you run the app:
and this is how it looks when you change the themeMode to: ThemeMode.dark