Question

我目前正在使用CupertinoApp class和Cupertino widgets迅速实现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'),
    );
  }
}

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

在Cupertino风格的应用程序（例如，黑暗与光亮的主题）中，定义主题并在运行时更改主题的推荐方法是什么？

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具有一个“原始”属性，其中包含以下属性：亮度，primaryColor，primaryContrastingColor，textTheme等。您要选择深色还是浅色？太简单了！

CupertinoThemeData.raw(Brightness.light)
CupertinoThemeData.raw(Brightness.Dark)

但是，如果要在运行时进行更改，则应编写一个函数：

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

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

Answer 2

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

在Flutter Cupertino中推荐使用深色/浅色或自定义主题实现

2 个答案: