How I can change theme with a switch in flutter using bloc?

Question

I am new in Flutter and bloc. I am making a app with bloc state management that can change the theme as the system theme changed. Now it work fine but I need switch that can override the theme. How can I implement that? I am making this app by watching a youtube tutorial. Is that anyway to create that switch that can change the theme.

Theme Cubit

class ThemeCubit extends Cubit<ThemeState> {
  ThemeCubit() : super(ThemeState(themeMode: ThemeMode.light)) {
    updateAppTheme();
  }

  void updateAppTheme() {
    final Brightness currentBrightness = AppTheme.currentSystemBrightness;
    currentBrightness == Brightness.light
        ? _setTheme(ThemeMode.light)
        : _setTheme(ThemeMode.dark);
  }

  void _setTheme(ThemeMode themeMode) {
    AppTheme.setStatusBarAndNavigationBarColor(themeMode);
    emit(ThemeState(themeMode: themeMode));
  }
}

Theme_state

class ThemeState {
  final ThemeMode themeMode;

  ThemeState({@required this.themeMode});
}

Here is the code of main.dart

void main() {
  Bloc.observer = AppBlocObserver();
  runApp(DevicePreview(
    builder: (context) => App(),
    enabled: false,
    plugins: [
      const ScreenshotPlugin(),
    ],
  ));
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider<ThemeCubit>(
          create: (context) => ThemeCubit(),
        ),
      ],
      child: MchatsApp(),
    );
  }
}

class MchatsApp extends StatefulWidget {
  const MchatsApp({
    Key key,
  }) : super(key: key);

  @override
  _MchatsAppState createState() => _MchatsAppState();
}

class _MchatsAppState extends State<MchatsApp> with WidgetsBindingObserver {
  @override
  void initState() {
    WidgetsBinding.instance.addObserver(this);
    super.initState();
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangePlatformBrightness() {
    context.read<ThemeCubit>().updateAppTheme();
    super.didChangePlatformBrightness();
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return OrientationBuilder(
          builder: (context, orientation) {
            SizerUtil().init(constraints, orientation);

            return MaterialApp(
              locale: DevicePreview.locale(context),
              builder: DevicePreview.appBuilder,
              title: Strings.appTitle,
              theme: AppTheme.lightTheme,
              darkTheme: AppTheme.darkTheme,
              themeMode: context.select(
                  (ThemeCubit themeCubit) => themeCubit.state.themeMode),
              debugShowCheckedModeBanner: false,
              initialRoute: AppRouter.root,
              onGenerateRoute: AppRouter.onGenerateRoute,
            );
          },
        );
      },
    );
  }
}

Islomkhuja Akhrarov · Answer 1 · 2021-03-29T17:38:31.850

2

Yes, You can

In Switch Widget's onChanged function call updateAppTheme() function in your cubit

context.read<ThemeCubit>().updateAppTheme();

Builder(
builder:(context){
bool isDark= context.select(
                  (ThemeCubit themeCubit) => themeCubit.state.themeMode)==ThemeMode.dark?true:false;
return Switch(value: isDark, onChanged: (value) {
context.read<ThemeCubit>().updateAppTheme();}
);
})

edited Mar 29 '21 at 17:38

answered Mar 29 '21 at 17:08

Islomkhuja Akhrarov

1,277
9
19

Its not working. Switch( activeColor: Colors.black, value: false, onChanged: (value) { ScaffoldMessenger.of(context).showSnackBar(SnackBar( content: Text('Theme Change'), duration: Duration(milliseconds: 700), )); setState(() { context.read().updateAppTheme(); _switchValue = value; }); }, ), – Sunny Rahi Mar 29 '21 at 17:26
Value from onChanged function is always false because it has no state – Islomkhuja Akhrarov Mar 29 '21 at 17:29
Wait i try to write specific code for your problem – Islomkhuja Akhrarov Mar 29 '21 at 17:36
It showed this but the theme did not change. I/flutter ( 5260): onChange -- ThemeCubit, Change { currentState: Instance of 'ThemeState', nextState: Instance of 'ThemeState' } – Sunny Rahi Mar 30 '21 at 04:35
@islamakhrarov I tried your snippet but the switcher is switching but it acts like it is disabled. Can you provide the entire code of the Counter UI with a switch, it will be clearer to understand – Maruf Hassan Apr 03 '21 at 13:56
@MarufHassan Hi, I wish to put the whole code, however, the question is about to solve the bug. I would recommend you to open a new question and PM me.) For now, I can recommend to watch this video : https://www.youtube.com/watch?v=YYbhkg-W8Mg&t=438s – Islomkhuja Akhrarov Apr 04 '21 at 09:36

How I can change theme with a switch in flutter using bloc?

1 Answers1