Flutter Cupertino 中推荐的 Dark/Light 或自定义 Theme 实现答案

【问题标题】：Recommended Dark/Light or custom Theme implementation in Flutter CupertinoFlutter Cupertino 中推荐的 Dark/Light 或自定义 Theme 实现
【发布时间】：2019-05-31 02:19:07
【问题描述】：

我目前正在使用 CupertinoApp class 和 Cupertino widgets 在 Flutter 中实现 iOS 风格的应用程序。现在我想为应用程序实现一个不同的主题（就像feedly 那样），以便用户可以在运行时在两者之间切换。

与MaterialApp 不同，CupertinoApp 没有设置主题的属性。

具有主题属性的MaterialApp：

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

没有主题属性的CupertinoApp：

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter Demo',
      // theme: ThemeData(
      //   primarySwatch: Colors.blue,
      // ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

它看起来像某人。正在开发 CupertinoTheme，它实际上似乎是 MaterialApp 的主题，而不是 CupertinoApp 的主题。

在库比蒂诺风格的应用程序（例如深色和浅色主题）中，在运行时定义和更改主题的推荐方法是什么？

【问题讨论】：

标签： flutter

【解决方案1】：

您可以使用以下包来控制深色和浅色主题，并且主题直接保存到共享首选项中，因此当您重新打开应用程序时，将加载您选择的最新主题，请使用自述文件中提供的包部分。 https://pub.dartlang.org/packages/dynamic_theme

【讨论】：

因此，如果我使用 CupertinoApp 类和 Cupertino 风格的小部件制作 Cupertino 风格的应用程序，在运行时更改主题的推荐方法是使用 MaterialApp 类和 Cupertino 风格的小部件，因为 CupertinoApp 是不支持主题？
好吧，我通常不使用 Cupertino，但这就是我更改主题的方式
如果我使用带有材质小部件的 MaterialApp，那么您的方法效果很好。不幸的是，CupertinoApp 没有可使用的主题属性。如果我将 MaterialApp 与 cupertino 风格的小部件结合使用包在深色和浅色主题之间切换，它不起作用。
它看起来行不通，因为 Cupertino 没有这样的属性
或者您可能需要在该主题上进行更多搜索，因为我没有使用 Cupertino 的经验，所以我不想给您错误的信息

【解决方案2】：

首先 CupertinoThemeData 是 ThemeData 的替代品：

import 'package:flutter/cupertino.dart';

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

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter Demo',
      theme: CupertinoThemeData(),
      home: MyHomePage(),
     );
    }
  }

CupertinoThemeData 有一个“原始”属性，其中包含以下属性：亮度、primaryColor、primaryContrastingColor、textTheme 等等。你想选择深色还是浅色？太简单了！！

CupertinoThemeData.raw(Brightness.light)
CupertinoThemeData.raw(Brightness.dark)

但是如果你想在运行时改变它，你应该写一个函数：

CupertinoThemeData generalTheme(Brightness brightness) {
  CupertinoThemeData _basicCupertinoTheme = CupertinoThemeData.raw(
    brightness,
    ...
}

如您所见，您可以向函数发送参数，但不要忘记使用 setState 方法。欲了解更多信息，请查看CupertinoThemeData.raw constructor

【讨论】：

CupertinoThemeData(brightness: Brightness.dark) 完美运行。非常感谢！