简介

像材质和库比蒂诺设计系统这样的用户界面(UI)包支持颤动。这些设计系统为您的整个应用程序提供了一致和连贯的美学解决方案。

然而，从品牌的角度来看，仅仅依赖默认的设计模式可能与您的需求不太一致。相反，您可能希望使用默认值作为基础，在此基础上应用自定义。

在这篇文章中，你将探索一些方法来改变你的应用程序的整体外观与颤动主题。

前提条件

要阅读本文，您需要：

下载并安装Flutter。
下载并安装Android Studio或 Visual Studio Code。
建议为您的代码编辑器安装插件：
- 为Android Studio安装的Flutter和Dart插件。
- [Flutter](https：marketplace.visualstudio.com/items? itemName=Dart-Code.flutter)扩展。

本文使用Ffltter v1.22.2、Android SDK v30.0.2和Android Studiov4.1进行了验证。

第一步-设置项目

就本文而言，您将依赖于在创建新的颤动应用程序时生成的演示应用程序。

将环境设置为颤动后，可以运行以下命令来创建新应用程序：

1flutter create flutter_themes_example

导航到新项目目录：

1cd flutter_themes_example

使用flutter create将产生一个演示应用程序，它将显示按钮被点击的次数：

Fluter演示主页应用程序的屏幕截图，其中包含一个按钮以及该按钮被pushed. 的次数的消息

现在您已经有了使用材质设计UI组件的可用的颤振应用程序，您可以将第一个自定义应用于主题。

第二步-使用默认主题

谷歌的素材包有两个内置的主题--浅色版(默认设置)和深色版。

要设置整个应用程序的样式，您需要将主题设置为MaterialApp小部件中ThemeData上的方法，在本例中，设置为light()或Dark()选项。

在代码编辑器中打开main.dart，将heme修改为ThemeData.dark()：

 1[label lib/main.dart]
 2// ...
 3
 4class MyApp extends StatelessWidget {
 5  @override
 6  Widget build(BuildContext context) {
 7    return MaterialApp(
 8      title: 'Flutter Demo',
 9      theme: ThemeData.dark(),
10      home: MyHomePage(title: 'Flutter Demo Home Page'),
11    );
12  }
13}
14
15// ...

编译代码并让其在模拟器中运行：

设置为Dark theme. 的福陆演示主页应用程序的屏幕截图

接下来，您可以尝试高级主题定制。

第三步-使用全局主题

也可以直接将参数传递给ThemeData。官方documentation列出了所有可用的属性，包括PrimiyColor、fontFamily和cursorColor。

ThemeData上的一些属性也有一个亮度对应物，这些属性控制它们上面的小部件。因此，accentColor将更改按钮，但accentColorBrightness将更改按钮上的文本或图标。你需要在Brightness上使用light或dark属性来实现这一点。

在代码编辑器中打开main.dart，修改ThemeData，使用自定义的PrimiyColor、accentColor、accentColorBrightness：

 1[label lib/main.dart]
 2// ...
 3
 4class MyApp extends StatelessWidget {
 5  @override
 6  Widget build(BuildContext context) {
 7    return MaterialApp(
 8      title: 'Flutter Demo',
 9      theme: ThemeData(
10        primaryColor: Colors.purple[800],
11        accentColor: Colors.amber,
12        accentColorBrightness: Brightness.dark
13      ),
14      home: MyHomePage(title: 'Flutter Demo Home Page'),
15    );
16  }
17}
18
19// ...

编译代码并让其在模拟器中运行：

Fluter Demo主页应用程序的屏幕截图设置为带有紫色AppBar和琥珀色button. 的自定义主题

AppBar显示为带有白色文本的紫色色调。按钮以琥珀色显示，上面有深色符号。

接下来，您可以尝试扩展主题。

第四步-改编主题

也可以采用现有主题并仅覆盖某些属性。要扩展一个主题，你可以使用copyWith方法来扩展它并传入你的自定义样式。

在代码编辑器中打开main.dart，修改ThemeData扩展dar主题：

 1[label lib/main.dart]
 2// ...
 3
 4class MyApp extends StatelessWidget {
 5  @override
 6  Widget build(BuildContext context) {
 7    return MaterialApp(
 8      title: 'Flutter Demo',
 9      theme: ThemeData.dark().copyWith(
10        primaryColor: Colors.purple[800],
11        accentColor: Colors.amber,
12      ),
13      home: MyHomePage(title: 'Flutter Demo Home Page'),
14    );
15  }
16}
17
18// ...

编译代码并让其在模拟器中运行：

Fluter Demo主页应用程序的屏幕截图设置为黑色主题，并使用紫色AppBar和琥珀色button. 进行修改

应用程序的主要内容以深色显示，文字较浅。然而，AppBar并不像早期的黑色主题实验那样是黑色的。AppBar为紫色。该按钮不像早先的深色主题实验那样是青绿色的。按钮呈琥珀色。

接下来，您将了解如何将主题应用于小部件。

第五步-使用主题

之前的实验依赖于材料小部件。这些小工具是为使用ThemeData而开发的。如果要创建新的自定义小部件，则需要确保可以将主题属性传递给它。您可以使用Theme.of()访问ThemeData上的所有属性。

以下是修改现有按钮以使用与ThemeData不同的主题属性的示例：

 1[label lib/main.dart]
 2// ...
 3
 4class _MyHomePageState extends State<MyHomePage> {
 5  // ...
 6
 7  @override
 8  Widget build(BuildContext context) {
 9    return Scaffold(
10      // ...
11
12      floatingActionButton: FloatingActionButton(
13        onPressed: _incrementCounter,
14        tooltip: 'Increment',
15        backgroundColor: Theme.of(context).primaryColor,
16        foregroundColor: Theme.of(context).primaryColorLight,
17        child: Icon(Icons.add),
18      ),
19    );
20  }
21}

编译代码并让其在模拟器中运行。

你应该看到的不是青绿色的按钮，而是一个带有浅色图标的深色按钮。

结论

在本文中，您学习了如何使用、定制和扩展Flight中的主题。

主题是在整个应用程序中创建一致和有凝聚力的美学的强大工具。

有关详细信息，请参阅官方文档。

如何在 Flutter 中使用主题

简介

前提条件

第一步-设置项目

第二步-使用默认主题

第三步-使用全局主题

第四步-改编主题

第五步-使用主题

结论