How can i change theme of my widget in this situation? - flutter

Question

Im not sure that my code is correct for using themes and easylocalization together and im open for any help too, but my main goal is creating a custom navigation bar inside of MyApp. When i do it like example down below, i cant change my NavBarItem theme with my theme provider because of its outside of MaterialApp. How can i handle this situation ?
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await EasyLocalization.ensureInitialized();
runApp(EasyLocalization(
supportedLocales: [
Locale('en'),
Locale('tr'),
],
path: 'assets/translations',
saveLocale: true,
fallbackLocale: Locale('en'),
child: 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 ChangeNotifierProvider(
create: (context) => CustomThemeData(),
builder: (context, _) {
return MaterialApp(
debugShowCheckedModeBanner: false,
localizationsDelegates: context.localizationDelegates,
supportedLocales: context.supportedLocales,
locale: context.locale,
theme: Provider.of<CustomThemeData>(context).getThemeData,
home: Scaffold(
body: _ActivePage,
bottomNavigationBar: Container(child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
NavBarItem(),
NavBarItem(),
NavBarItem(),
],
),),
),
//
);
},
);
}
Widget NavBarItem(){}
}

Answer 1

You can try this below codebase, I think you will get your solution.
main.dart
import 'package:easy_localization/easy_localization.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:theme_changer/custom_theme_data.dart';
final callMenuTheme = ThemeData(
primarySwatch: Colors.orange,
colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.orange),
iconTheme: const IconThemeData(
color: Colors.orange,
),
);
final cameraMenuTheme = ThemeData(
primarySwatch: Colors.red,
colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.red),
iconTheme: const IconThemeData(
color: Colors.red,
),
);
final chatMenuTheme = ThemeData(
primarySwatch: Colors.green,
colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.green),
iconTheme: const IconThemeData(
color: Colors.green,
),
);
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await EasyLocalization.ensureInitialized();
runApp(EasyLocalization(
supportedLocales: const [
Locale('en'),
Locale('tr'),
],
path: 'assets/translations',
saveLocale: true,
fallbackLocale: const Locale('en'),
child: ChangeNotifierProvider(
create: (context) => CustomThemeData(0, callMenuTheme),
builder: (context, _) {
return MaterialApp(
debugShowCheckedModeBanner: false,
localizationsDelegates: context.localizationDelegates,
supportedLocales: context.supportedLocales,
locale: context.locale,
theme: Provider.of<CustomThemeData>(context).getThemeData(),
home: 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) {
var themeNotifier = Provider.of<CustomThemeData>(context,listen: false);
List<Widget> _pages = <Widget>[
const Icon(
Icons.call,
size: 150,
),
const Icon(
Icons.camera,
size: 150,
),
const Icon(
Icons.chat,
size: 150,
),
];
void _onItemTapped(int index) async{
setState(() {
switch(index) {
case 0:
{
themeNotifier.setNavigationIndexData(0);
themeNotifier.setThemeData(callMenuTheme);
}
break;
case 1:
{
themeNotifier.setNavigationIndexData(1);
themeNotifier.setThemeData(cameraMenuTheme);
}
break;
case 2:
{
themeNotifier.setNavigationIndexData(2);
themeNotifier.setThemeData(chatMenuTheme);
}
break;
default:
{
themeNotifier.setNavigationIndexData(0);
themeNotifier.setThemeData(callMenuTheme);
}
break;
}
});
}
return MaterialApp(
debugShowCheckedModeBanner: false,
localizationsDelegates: context.localizationDelegates,
supportedLocales: context.supportedLocales,
locale: context.locale,
theme: themeNotifier.getThemeData(),
home: Scaffold(
appBar: AppBar(
title: const Text('BottomNavigationBar Demo'),
),
body: Center(
child: _pages.elementAt(themeNotifier.getNavigationIndexData()),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.call),
label: 'Calls',
),
BottomNavigationBarItem(
icon: Icon(Icons.camera),
label: 'Camera',
),
BottomNavigationBarItem(
icon: Icon(Icons.chat),
label: 'Chats',
),
],
currentIndex: themeNotifier.getNavigationIndexData(),
onTap: _onItemTapped,
),
),
);
}
}
custom_theme_data.dart
import 'package:flutter/material.dart';
class CustomThemeData with ChangeNotifier {
ThemeData? _themeData;
int? _navigationIndex;
CustomThemeData(this._navigationIndex, this._themeData);
getNavigationIndexData() => _navigationIndex;
setNavigationIndexData(int navigationIndex) async {
_navigationIndex = navigationIndex;
notifyListeners();
}
getThemeData() => _themeData;
setThemeData(ThemeData themeData) async {
_themeData = themeData;
notifyListeners();
}
}
If you need a better idea about the project, here is the GitHub link to this project. Also, you will check the screenshots(1,2,3) of this project.