Flutter Cupertino 中推荐的 Dark/Light 或自定义主题实现

Question

我目前正在使用CupertinoApp 类和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 的主题。

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

Answer 1

首先，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 有一个“原始”属性，其中包含以下属性：Brightness、primaryColor、primaryContrastingColor、textTheme 等。您要选择深色还是浅色？这太容易了！！

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

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

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

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