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,
            );
          },
        );
      },
    );
  }
}

Answer 1

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();}
);
})