Flutter：使用 GetX 实用程序函数时存储语言和主题首选项

Question

Is there any way to store user preferences (and retrieve them on reboot) when using GetX 's utility functions:

Get.changeTheme(ThemeData().dark)

as well as

Get.updateLocale(Locale('en', 'US'));

So far I am only able to change both, the theme and the language, but I have not found a way in GetX to persevere any of my changes to any sort of storage in order to be loaded when reopening the app the next time. Is there anything I am overlooking? Is there any way to hook into the startup process and check for some stored values (eg in SharedPreferences ) and pass them to my locale and theme properties in GetMaterialApp ?

This is my code:

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      translations: Messages(),
      locale: Get.locale,
      theme: Get.theme,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
                onPressed: () => {
                      Get.changeTheme(
                          Get.isDarkMode ? ThemeData.light() : ThemeData.dark())
                    },
                child: Text('change_theme'.tr)),
            TextButton(
                onPressed: () => {
                      Get.updateLocale(Get.locale == Locale('en', 'US')
                          ? Locale('de', 'DE')
                          : Locale('en', 'US'))
                    },
                child: Text('change_language'.tr)),
          ],
        ));
  }
}

class Messages extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
        'en_US': {
          'change_theme': 'Change Theme',
          'change_language': 'Change Language',
        },
        'de_DE': {
          'change_theme': 'Farbschema wechseln',
          'change_language': 'Sprache wechseln',
        }
      };
}

Answer 1

This is easier to do with GetStorage .

If you're just changing from light to dark theme, it's a matter of storing a simple bool every time the theme is changed.

Here's one way to do this with a basic settings class.

class SettingsController extends GetxController {
  ThemeData themeData;

  final box = GetStorage();

  @override // called when you use Get.put before running app
  void onInit() {
    super.onInit();
    _restoreTheme();
  }

  void _restoreTheme() {
    bool isDark = box.read('isDark') ?? true; // null check for first time running this
    if (isDark) {
      themeData = ThemeData.dark();
    } else {
      themeData = ThemeData.light();
    }
  }

  void storeThemeSetting(bool isDark) {
    box.write('isDark', isDark);
  }
}

The themeData variable from the SettingsController class gets initialized depending on the bool value from storage. And that themeData file is what you pass into your GetMaterialApp , which looks like this.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final controller = Get.find<SettingsController>();
    return GetMaterialApp(
      theme: controller.themeData,
      title: 'Material App',
      home: StorageDemo(),
    );
  }
}

Then put both of these lines in your Main method before running your app.

  await GetStorage.init();

  Get.put(SettingsController());

Here's a demo page where you can test this.

class StorageDemo extends StatelessWidget {
  Widget build(BuildContext context) {
    final controller = Get.find<SettingsController>();
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            TextButton(
              onPressed: () {
                Get.changeTheme(ThemeData.dark());
                controller.storeThemeSetting(true);
              },
              child: Text('Dark Theme'),
            ),
            TextButton(
              onPressed: () {
                Get.changeTheme(ThemeData.light());
                controller.storeThemeSetting(false);
              },
              child: Text('Light Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

If you have a more complex ThemeData file, then the same concept applies but you have to store each color individually, which I find is easiest to do by storing the int value of a color.

  int colorValue = Colors.red.value; // store this int

Then when restoring from storage you can use this function

Color mapIntToColor(int value) {
    return Color(value);
  }

As for your language settings, same thing. Just add a Locale variable to your Getx class, store a couple strings, initialize before running the app, then pass that Locale variable into the locale field in GetMaterialApp .

Answer 2

It should be possible using SharedPreferences. Assign key value pairs (eg theme, dark) or (theme, light) that you can save and read and then run your logic on those to call the ThemeData when opening the app.

saving:

_saveTheme() async {
  final prefs = await SharedPreferences.getInstance();
  final key = 'theme';
  final value = _theme;
  prefs.setString(key, value);
 }

reading when initializing app and set theme - something like this (I did not test):

_readTheme(context) async {
  final prefs = await SharedPreferences.getInstance();
  final key = 'theme';
  final _theme = prefs.getString(key) ?? "light"; //set theme to light if the key is not found in SharedPreferences
  Get.changeTheme(
   _theme == 'light' ? ThemeData.light() : ThemeData.dark())
}