Flutter BloC NOT re-building after using multiblocprovider

Question

I am using flutter BloC .

I Have Two block need to be applied to the app (Theme and Language).

I used MultiBlocProvider with Builder to clear the code as possible.

The problem is when I press the buttons in Localization Screen & The Theme Screen The App NOT Re-Build

but when I restart the app, I found the state I pressed is stored in shared preference

Example The Current State is dark Theme, I press The Light Theme Button, the app is still in dark theme, When I re-started the app, It's is opened in Light Theme.

How can I Solve this problem

I Uploaded the code to GitHub on the following Link

https://github.com/MaxJan2010/flutter_bloc_starting_project

Can anybody help?

Answer 1

The problem that I forgot to pass the variables of appThemeType & languageCode

So, overriding the props was the solution

In localization state:

@override

List<Object> get props => [languageCode??''];

https://github.com/MaxJan2010/flutter_bloc_starting_project/blob/ed2c632d708bb74438290c87168990c88be02d2c/lib/logic/utility/app_localization/localization_state.dart#L24

also here in theme state

  @override

  List<Object> get props => [appThemeType??''];

https://github.com/MaxJan2010/flutter_bloc_starting_project/blob/ed2c632d708bb74438290c87168990c88be02d2c/lib/logic/utility/app_theme/app_theme_state.dart#L21C1-L22C48

Answer 2

Wrap theme with ThemeBlocBuilder and wrap locale with LocaleBlocBuilder this will make your screen updates as your state changes

Answer 3

You can make use of the BlocBuilder widgets more effectively. Below is the code:

MultiBlocProvider(
        providers: [
          BlocProvider(
            create: (context) => AppConnectivityBloc(),
          ),
          BlocProvider(
            create: (context) =>
                AppLocalizationBloc()..add(AppLocalizationInitialEvent()),
          ),
          BlocProvider(
            create: (context) => AppThemeBloc()..add(AppThemeInitialEvent()),
          ),
        ],
        child: BlocBuilder<AppLocalizationBloc, AppLocalizationState>(
          builder: (context, langState) {
            var lang = langState is AppLocalizationChangeState
                ? langState.languageCode
                : 'en';
            return BlocBuilder<AppThemeBloc, AppThemeState>(
              builder: (context, themeState) {
                var theme = themeState is AppThemeChangeState
                    ? themeState.appThemeType
                    : 'light';
                return MaterialApp(
                  debugShowCheckedModeBanner: false,
                  theme:
                      theme == 'light' ? ThemeData.light() : ThemeData.dark(),
                  home: const MyHomeScreen(),
                  locale: Locale(lang!),
                  supportedLocales: const [
                    Locale('en'),
                    Locale('ar'),
                  ],
                  localizationsDelegates: [
                    AppLocalizations.delegate,
                    GlobalMaterialLocalizations.delegate, // For Android
                    GlobalWidgetsLocalizations
                        .delegate, // For Widget Directions
                    GlobalCupertinoLocalizations.delegate, // For IOS
                  ],
                  localeResolutionCallback: (deviceLocale, supportedLocales) {
                    for (var locale in supportedLocales) {
                      if (deviceLocale != null) {
                        if (deviceLocale.languageCode == locale.languageCode) {
                          return deviceLocale;
                        }
                      }
                    }
                    return supportedLocales.first;
                  },
                );
              },
            );
          },
        ));

Answer 4

use BlocBuilder above the MaterialApp Widget