颤振中的亮/暗模式答案

【问题标题】：Light / Dark Mode in flutter颤振中的亮/暗模式
【发布时间】：2021-09-08 08:40:14
【问题描述】：

我想将明暗模式开关放在应用程序中。开关没问题。但它在应用程序上没有任何变化。只是我看到了轻主题。而且，当我单击开关时，我收到此错误或警告 (idk)。：引发了另一个异常：尝试从小部件树外部侦听提供程序公开的值。

这是main.dart：

    import 'package:provider/provider.dart';
    import 'package:bankingapp/widget/themestate.dart';
    
    void main() {
      runApp(ChangeNotifierProvider<ThemeState>(
        create: (context) => ThemeState(),
        child: MyApp(),
      ));
    }

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          theme: Provider.of<ThemeState>(context).theme == ThemeType.DARK
              ? ThemeData.dark()
              : ThemeData.light(),
          debugShowCheckedModeBanner: false,
          home: MySplash(),
        );
      }
    }

这是 homescreen.dart：

Container(
  child: Switch(
    value: Provider.of<ThemeState>(context).theme == ThemeType.DARK,
    onChanged: (value) {
      Provider.of<ThemeState>(context).theme =
          value ? ThemeType.DARK : ThemeType.LIGHT;
      setState(() {});
    },
  ),
),

这是themestate.dart：

import 'package:flutter/material.dart';

enum ThemeType { DARK, LIGHT }

class ThemeState extends ChangeNotifier {
  bool _isDarkTheme = false;

  ThemeState() {
    getTheme().then((type) {
      _isDarkTheme = type == ThemeType.DARK;
      notifyListeners();
    });
  }
  ThemeType get theme => _isDarkTheme ? ThemeType.DARK : ThemeType.LIGHT;
  set theme(ThemeType type) => setTheme(type);

  void setTheme(ThemeType type) async {
    _isDarkTheme = type == ThemeType.DARK;
    notifyListeners();
  }

  Future<ThemeType> getTheme() async {
    return _isDarkTheme ? ThemeType.DARK : ThemeType.LIGHT;
  }
}

注意：这段代码 sn-p 是关于 ThemeS 的项目的一部分。因为代码由很长的一行组成。

【问题讨论】：

stackoverflow.com/questions/60232070/…

标签： android ios flutter dart themes

【解决方案1】：

在按钮上调用Provider.of 时，您应该始终传递listen: false，如下所示：

onChanged: (value) {
  Provider.of<ThemeState>(context, listen: false).theme =
    value ? ThemeType.DARK : ThemeType.LIGHT;
    setState(() {});
})

老实说，我不确定这是否会修复您的代码，但是当我尝试复制您的错误时，我收到以下错误消息：

════════ Exception caught by gesture ═══════════════════════════════════════════
Tried to listen to a value exposed with provider, from outside of the widget tree.

This is likely caused by an event handler (like a button's onPressed) that called
Provider.of without passing `listen: false`.

这是我的最小示例，在添加 listen: false 后有效

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

void main() {
  runApp(ChangeNotifierProvider<MyValue>(
    create: (context) => MyValue(true),
    child: MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Checkbox(
          value: Provider.of<MyValue>(context).value,
          onChanged: (val) {
            Provider.of<MyValue>(context, listen: false).value = val!;
            setState(() {});
          },
        ),
      ),
    );
  }
}

class MyValue extends ChangeNotifier {
  MyValue(this.value);
  bool value;
}

所以我希望添加listen: false 可以解决您的问题

【讨论】：