Flutter:如何在 Flutter 中使用 Switch 更改主题 - 我已经使用 Provider 实现了这个明暗主题,但不能使用 switch 更改

Posted

技术标签:

【中文标题】Flutter:如何在 Flutter 中使用 Switch 更改主题 - 我已经使用 Provider 实现了这个明暗主题,但不能使用 switch 更改【英文标题】:Flutter: How I Can Change Theme Using Switch in Flutter - I have Implemented this Light and Dark Theme Using Provider, But can not change with switch 【发布时间】:2020-12-24 21:03:09 【问题描述】:

我已经使用提供者更改主题,这是明暗主题的代码。我的问题的主要目的是用开关而不是按钮来改变主题。 可以使用“int 模式”通过按钮正确更改主题。 但是当我因为开关而使用“布尔模式”时。开关需要 true 或 false 的值。

如何实现这个开关来改变明暗主题?我需要一个开关,而不是一个按钮。

import 'package:flutter/material.dart';

class AppStyleModeNotifier extends ChangeNotifier 
  bool mode = true; //0 for light and 1 for dark
  Color primaryBackgroundColor = Colors.white;
  Color appBarBackgroundColor = Colors.cyan[200];
  Color boxColor = Colors.blue[50];
  Color boxTextColor = Colors.indigo;
  Color primaryTextColor = Colors.white;
  Color dashboardColor = Colors.cyan;
  Color dashboardTextColor = Colors.red[600];
  Color dashboardIconColor = Colors.yellow[200];
  //Color typeMessageBoxColor = Colors.grey[200];

  switchMode() 
    if (mode == true) 
      //if it is light mode currently switch to dark
      primaryBackgroundColor = Colors.grey[900];
      appBarBackgroundColor = Colors.grey[800];
      // boxColor = Colors.grey[600];
      boxColor = Colors.black;
      boxTextColor = Colors.grey[100];
      primaryTextColor = Colors.black;
      dashboardColor = Colors.grey[900];
      dashboardTextColor = Colors.grey[400];
      dashboardIconColor = Colors.white;
      //typeMessageBoxColor = Colors.grey[800];
      mode = false;
     else 
      //if it is dark mode currently switch to light
      primaryBackgroundColor = Colors.white;
      appBarBackgroundColor = Colors.cyan[200];
      boxColor = Colors.tealAccent;
      boxTextColor = Colors.indigo;
      primaryTextColor = Colors.white;
      dashboardColor = Colors.cyan;
      dashboardTextColor = Colors.red[600];
      dashboardIconColor = Colors.yellow[200];
      //typeMessageBoxColor = Colors.grey[200];
      mode = true;
    

    notifyListeners();
  

下面是切换明暗主题的开关。这个开关不能正常工作,代码有没有错误。代替使用按钮的开关,它可以正常工作。

import 'package:provider/provider.dart';
import '../FreelanceTheme/AppStyleModeNotifier.dart';

class HomePage extends StatelessWidget with NavigationStates 

  const HomePage(Key key, this.onMenuTap) : super(key: key);

  @override
  Widget build(BuildContext context) 
    final appStyleMode = Provider.of<AppStyleModeNotifier>(context);
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Color(0xffE5E5E5),
        appBar: AppBar(
          elevation: 0,
          backgroundColor: appStyleMode.appBarBackgroundColor,
          actions: <Widget>[
            Switch(
              value: appStyleMode.mode,
              onChanged: appStyleMode.switchMode(),
            ),

【问题讨论】:

【参考方案1】:

把你的代码改成这样,就可以了。

Switch(
  value: appStyleMode.mode,
  onChanged: (value)=> appStyleMode.switchMode(),
),

【讨论】:

嗨 Devny,您提供的代码对我有用。这是正确的代码。我弄乱了状态改变的布尔值。所以我非常非常感谢你。你是一个伟大的人。

以上是关于Flutter:如何在 Flutter 中使用 Switch 更改主题 - 我已经使用 Provider 实现了这个明暗主题,但不能使用 switch 更改的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Flutter 中为 iOS 创建闹钟应用

如何使用 GoogleMaps 在 PlacePicker 中将当前位置设置为 initialPosition - Flutter

我们如何使用 ArCore 在 Flutter 中实现类似 snapchat 的过滤器

3-7 视频讲解Flutter入门基础知识

在 Flutter 的 GridView 中显示图像?

带有项目的地图中的返回语句:在 Flutter DropdownButton 中,为啥以及如何工作