Question

我已经设法在我的应用程序中实现了暗模式，但是我不知道如何在其他屏幕上实现暗模式，因此当我在设置中按下按钮时，整个应用程序都进入了暗模式。我知道这与通知听众有关，但我不知道从哪里开始。

目前，我正在使用共享首选项存储暗模式，并且有一个单独的主题文件。

我的问题是有效地如何在其他屏幕上实现暗模式？

这是我的主控制器代码

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

Answer 1

使用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]),
          ),
      );

Answer 2

这是您如何实现的。

使用Consumer。该小部件可让您收听Settings
将新主题传递到您的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'),
    ));
  }
 }

这是一种实时检测。每当您更改主题时，此代码都会在整个应用中对其进行更新

如何将其他屏幕切换为黑暗模式

2 个答案: