如何使用 bloc 在颤动中切换主题？

问题描述

我是 Flutter 和 bloc 的新手。我正在制作一个带有块状态管理的应用程序，它可以随着系统主题的改变而改变主题。现在它工作正常，但我需要可以覆盖主题的开关。我该如何实施？我正在通过观看 youtube 教程来制作这个应用程序。 无论如何要创建可以更改主题的开关。

主题肘

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

主题状态

class ThemeState {
  final ThemeMode themeMode;

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

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

解决方法

是的，你可以

在 Switch Widget 的 onChanged 函数中调用 updateAppTheme() 函数在你的肘部

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