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

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.