使用 GetX 改变主题？

Posted 2023-03-07

【中文标题】使用 GetX 改变主题？

【英文标题】：Flutter changing theme using GetX?

【发布时间】：2021-10-04 13:29:57

【问题描述】：

我在flutter中做了一个可变主题，后来做了多语言支持，我使用getx进行主题切换，我使用easy_localization进行语言更改。当我在主页上使用 GetMeterialapp 时，它不起作用，当我使用 Meterialapp 时，它适用于多语言，但主题更改不起作用。在另一个页面上导入“package:get/get.dart”；我正在使用，当我在这里使用 easy_localization 时，easy_localization 不起作用。我正在取消 getx 正在工作。我无法摆脱这种局面。如果解决不了，我要么不换主题就放弃，要么多语言支持。

     await EasyLocalization.ensureInitialized();
  runApp(EasyLocalization(supportedLocales: [
    Locale("en", "US"),
    Locale("tr", "TR"),
  ], path: "assets/Language", saveLocale: true, child: MyApp()));


class MyApp extends StatelessWidget 
  @override
  Widget build(BuildContext context) 
    return new MaterialApp(
      title: 'Home Page',
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      theme: Themes.light,
      darkTheme: Themes.dark,
      themeMode: ThemeService().theme,
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,
    );
  

【参考方案1】：

在 main 方法中初始化 GetStorage。

void main() async
  WidgetsFlutterBinding.ensureInitialized();
  await GetStorage.init(); 
  runApp(MyApp());

创建存储对象。

final storage = GetStorage();

如果 storage 为 null，则设置默认值。

storage.writeIfNull('darkmode', false);

读取主题模式值。

bool isDarkMode = storage.read('darkmode');

应用主题模式。

Switch(
 value: isDarkMode ,
 onChanged: (value) => storage.write('darkmode', value),
)

完整代码：

import 'package:flutter/material.dart';
import 'package:get_storage/get_storage.dart';
import 'package:get/get.dart';

void main() async
  WidgetsFlutterBinding.ensureInitialized();
  await GetStorage.init();  
  runApp(MyApp());


class MyApp extends StatelessWidget 
  final storage = GetStorage();  

  @override
  Widget build(BuildContext context) 
    appdata.writeIfNull('darkmode', false);
    return SimpleBuilder(
      builder: (_)
      
        bool isDarkMode = storage.read('darkmode');
        return GetMaterialApp(
          theme: isDarkMode ? ThemeData.dark() : ThemeData.light(),
          home: Scaffold(
            appBar: AppBar(title: Text("Getx Dynamic theme change"),),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset(isDarkMode ? 'images/night.png' :'images/day.png' ,width: 100,height: 100,),
                  Switch(
                    value: isDarkMode ,
                    onChanged: (value) => storage.write('darkmode', value),
                  )
                ],
              ),
            ),
          ),
        );
      ,
    );