Как переключить другие экраны в темный режим - PullRequest
0 голосов
/ 26 мая 2020

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

В настоящее время я использую общие настройки для хранения темного режима, и у меня есть отдельный файл для темы.

Мой вопрос: как эффективно реализовать темный режим на других экранах?

Вот мой основной код контроллера

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

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

class Darkmode extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    /// Here we are asynchronously passing an instance of SharedPreferences
    /// to our Settings ChangeNotifier class and that in turn helps us
    /// determine the basic app settings to be applied whenever the app is
    /// launched.
    return FutureBuilder<SharedPreferences>(
      future: SharedPreferences.getInstance(),
      builder:
          (BuildContext context, AsyncSnapshot<SharedPreferences> snapshot) {
        return ChangeNotifierProvider<Settings>.value(
          value: Settings(snapshot.data),
          child: _Darkmode(),
        );
      },
    );
  }
}

class _Darkmode extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: Provider.of<Settings>(context).isDarkMode
          ? setDarkTheme
          : setLightTheme,
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          widget.title,
          style: TextStyle(color: Theme.of(context).accentColor),
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Provider.of<Settings>(context).isDarkMode
                ? Icons.brightness_high
                : Icons.brightness_low),
            onPressed: () {
              changeTheme(
                  Provider.of<Settings>(context, listen: false).isDarkMode
                      ? false
                      : true,
                  context);
            },
          ),
        ],
      ),
      body: Center(),
    );
  }

  void changeTheme(bool set, BuildContext context) {
    ///Call setDarkMode method inside our Settings ChangeNotifier class to
    ///Notify all the listeners of the change.
    Provider.of<Settings>(context, listen: false).setDarkMode(set);
  }
}

Вот файл общих настроек:

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

/// Class that contains all your app settings
/// Consists only of Theme setting as of now
class Settings extends ChangeNotifier {
  final SharedPreferences sharedPreferences;

  Settings(this.sharedPreferences);

  bool get isDarkMode => sharedPreferences?.getBool("isDarkMode") ?? false;

  void setDarkMode(bool val) {
    sharedPreferences?.setBool("isDarkMode", val);
    notifyListeners();
  }
}```

Ответы [ 2 ]

1 голос
/ 26 мая 2020

Используйте ThemeData (), чтобы применить тему ко всему приложению!

bool isDarkMode = Provider.of<Settings>(context).isDarkMode
return MaterialApp(             
          theme: ThemeData(
            primaryColor: isDarkMode ? Colors.blueGrey[900] : Colors.white,
            accentColor: isDarkMode ? null : Colors.pink,
            scaffoldBackgroundColor: isDarkMode ? Colors.blueGrey[900] : Colors.white,
            brightness: isDarkMode ? Brightness.dark : Brightness.light,
            backgroundColor: isDarkMode ? Colors.white : Colors.blueGrey[900],
            dividerTheme: DividerThemeData(endIndent: 10, indent: 10),
            iconTheme: IconThemeData(
                color: isDarkMode ? Colors.white : Colors.grey[900]),
            textTheme: Theme.of(context)
                .textTheme
                .apply(
                    displayColor: model.drakModeState
                        ? Colors.white
                        : Colors.grey[900],
                    bodyColor: model.drakModeState
                        ? Colors.white
                        : Colors.grey[900]),
          ),
      );
0 голосов
/ 26 мая 2020

Вот как вы можете этого добиться.

  1. используйте Consumer. этот виджет позволит вам прослушивать изменения в Settings
  2. передавать новую тему в ваш MaterialApp.

Затем объединять их.

  class _Darkmode extends StatelessWidget { 
  @override
  Widget build(BuildContext context) {
  //settingProvider is the current instance of Settings (up to date) 
    return  Consumer<Settings>(builder: (ctx, settingProvider, child)=> MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: settingProvider.isDarkMode
          ? setDarkTheme
          : setLightTheme,
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    ));
  }
 }

Это своего рода обнаружение в реальном времени. Каждый раз, когда вы меняете тему, этот код обновляет ее для всего приложения

...