Как загрузить тему в начале в флаттере

Question

Я хочу, чтобы пользователи могли изменить и сохранить цвет темы в моем приложении. Однако я не знаю, как загрузить сохраненный цвет темы при запуске приложения. Например, я хочу загрузить сохраненный цвет темы прямо в комментариях ниже. Я попробовал SharedPreference. Однако экземпляр SharedPreference должен работать с await . Кажется, здесь нельзя использовать. Есть ли способ загрузить сохраненную тему здесь напрямую, вместо использования setState или чего-то подобного？

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: // how to load saved theme here?
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Answer 1

Этот ответ идет немного дальше. В нем показано, как загрузить и сохранить настройки темы, как создать ThemeData и как изменить тему со страницы вашего приложения.

---

• Сохраните пользовательские настройки (какая тема выбрана) с помощью плагина shared_preferences.
• Используйте «шаблон контроллера», который используется во всей среде Flutter, чтобы предоставить текущую выбранную тему (и изменения к ней) для вашего приложения.
• Используйте InheritedWidget для использования контроллера в любой части вашего приложения.

Вот как выглядит контроллер:

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

/// provides the currently selected theme, saves changed theme preferences to disk
class ThemeController extends ChangeNotifier {
  static const themePrefKey = 'theme';

  ThemeController(this._prefs) {
    // load theme from preferences on initialization
    _currentTheme = _prefs.getString(themePrefKey) ?? 'light';
  }

  final SharedPreferences _prefs;
  String _currentTheme;

  /// get the current theme
  String get currentTheme => _currentTheme;

  void setTheme(String theme) {
    _currentTheme = theme;

    // notify the app that the theme was changed
    notifyListeners();

    // store updated theme on disk
    _prefs.setString(themePrefKey, theme);
  }

  /// get the controller from any page of your app
  static ThemeController of(BuildContext context) {
    final provider = context.inheritFromWidgetOfExactType(ThemeControllerProvider) as ThemeControllerProvider;
    return provider.controller;
  }
}

/// provides the theme controller to any page of your app
class ThemeControllerProvider extends InheritedWidget {
  const ThemeControllerProvider({Key key, this.controller, Widget child}) : super(key: key, child: child);

  final ThemeController controller;

  @override
  bool updateShouldNotify(ThemeControllerProvider old) => controller != old.controller;
}

Вот как вы бы использовали контроллер и InheritedWidget в своем приложении:

void main() async {
  // load the shared preferences from disk before the app is started
  final prefs = await SharedPreferences.getInstance();

  // create new theme controller, which will get the currently selected from shared preferences
  final themeController = ThemeController(prefs);

  runApp(MyApp(themeController: themeController));
}

class MyApp extends StatelessWidget {
  final ThemeController themeController;

  const MyApp({Key key, this.themeController}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // use AnimatedBuilder to listen to theme changes (listen to ChangeNotifier)
    // the app will be rebuilt when the theme changes
    return AnimatedBuilder(
      animation: themeController,
      builder: (context, _) {
        // wrap app in inherited widget to provide the ThemeController to all pages
        return ThemeControllerProvider(
          controller: themeController,
          child: MaterialApp(
            title: 'Flutter Demo',
            theme: _buildCurrentTheme(),
            home: MyHomePage(),
          ),
        );
      },
    );
  }

  // build the flutter theme from the saved theme string
  ThemeData _buildCurrentTheme() {
    switch (themeController.currentTheme) {
      case "dark":
        return ThemeData(
          brightness: Brightness.dark,
          primarySwatch: Colors.orange,
        );
      case "light":
      default:
        return ThemeData(
          brightness: Brightness.light,
          primarySwatch: Colors.blue,
        );
    }
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                // thanks to the inherited widget, we can access the theme controller from any page
                ThemeController.of(context).setTheme('light');
              },
              child: Text('Light Theme'),
            ),
            RaisedButton(
              onPressed: () {
                ThemeController.of(context).setTheme('dark');
              },
              child: Text('Dark Theme'),
            )
          ],
        ),
      ),
    );
  }
}

Answer 2

У вас есть несколько вариантов того, как вы его загрузите. Первый, как сказал Гюнтер в комментарии - вы превращаете MyApp в виджет с состоянием и загружаете его с initState(), а затем устанавливаете его.

Это будет выглядеть примерно так:

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {

  ThemeData theme = ThemeData.dark(); // whatever your default is

  @override
  void initState() {
    super.initState();
    SharedProperties.getInstance().then((prefs) {
     ThemeData theme = ThemeData.light(); // load from prefs here
     setState(() => this.theme = theme);
    });
  }

  ...
}

Второй вариант - использовать FutureBuilder.

class MyApp extends StatelessWidget {

  final Future<ThemeData> loadThemeData = SharedPreferences.getInstance().then((prefs) {
     ... get theme from prefs
     return ThemeData.light();
  });


  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
      future: loadThemeData,
      builder: (context, snapshot) {
        return MaterialApp(
          theme: snapshot.data,
        );        
      },
      initialData: ThemeData.dark(), // whatever you want your default theme to be
    );
  }
}

Третий вариант - выполнить загрузку до того, как вы действительно запустите свое приложение - в вашем основном методе. Я не знаю, действительно ли это рекомендуется, так как если для sharedpreferences требуется некоторое время, это может задержать запуск вашего приложения, но в действительности это должно быть очень быстрым, и вы, возможно, захотите избежать показа другой флэш-темы.

main() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  ThemeData theme = ThemeData.dark(); // get theme from prefs

  runApp(MyApp(
    theme: theme,
  ));
}

class MyApp extends StatelessWidget {
  final ThemeData theme;

  const MyApp({Key key, @required this.theme}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: theme,
      ....
    );
  }
}