什么是主题设计？
主题设计是一个通用名称，指的是为应用程序设计风格，使其看起来有吸引力，有吸引力，并符合你的口味或需求。它是使你的应用程序变得漂亮的东西，由于个人喜好不同，这背后的具体内容在不同人之间也会有所不同。
像文本风格、文本颜色、图标风格等因素都有助于一个应用程序的主题。使一个应用程序吸引用户的一切都来自于主题设计，磨练您对Flutter主题的知识将对您成为一个更熟练的Flutter开发者有很大的帮助。
您可以用什么来为Flutter中的应用程序做主题？
Flutter的 [MaterialApp](https://api.flutter.dev/flutter/material/MaterialApp-class.html)自带一个默认的浅蓝色主题。当你启动默认的计数器应用程序时，你会看到它：它是普通的蓝色和白色。
然而，正如我们之前强调的那样，有许多方法可以为应用程序设置主题，从改变简单的文本和图标风格的外观，到使用容器小部件等造型小工具。 [TextButton](https://api.flutter.dev/flutter/material/TextButton-class.html)，或 [RawMaterialButton](https://api.flutter.dev/flutter/material/RawMaterialButton-class.html).在一个应用程序中，也有复杂的浅色和深色主题模式的切换。
所有这些都有助于一个应用程序的整体主题。本文将逐一介绍这些为 Flutter 应用程序设置主题的方法。
小部件和容器的主题化
在这一节中，我们将讨论如何在Flutter中为小部件和容器定型，为一个文本小部件和容器小部件定型。Flutter提供了一个TextStyle 类，该类包含几个属性，可以修改文本小部件的外观和感觉。
Text("I went for a walk")
Flutter以默认的颜色、大小、结构和重量在屏幕上渲染这个文本。我们现在可以添加一些样式来增强应用程序的外观和感觉。我们将通过调整TextStyle 类提供的属性来做到这一点。
Text("I went for a walk",
style: TextStyle(
color: Colors.blue,
weight: FontWeight.bold,
fontSize: 18,
),
),
通过调整TextStyle 类的属性，我们已经改变了文本的外观和感觉，并为应用程序的整体主题增加了兴趣。
容器小部件的造型过程与我们对TextStyle 所做的相似；然而，我们在这里通过调整BoxDecoration 类的属性来实现造型，然后将其传递给容器小部件的装饰参数。
Container(
height: 48,
margin: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: const BorderRadius.all(
Radius.circular(16),
),
border: Border.all(
color: Colors.blue,
width: 2,
),
),
);
上面，我们给容器分配了一个颜色（灰色），并通过调整borderColor 属性给它一个蓝色的边界。这给我们提供了一条围绕容器本身宽度为2px的蓝线。
我们在上面的代码块中做的另一个造型选择是改变边框半径；我们给它一个16px的圆形边框半径。这为容器的边缘提供了一个很好的圆角形状，而不是默认容器的平边。
最后，我们给整个容器留了16px的边距，这样就在容器的每一侧都留了16px的空间。
使用材料ThemeData 类
我们之前讨论的两种情况--TextStyle 类和容器小部件--都是为那个特定的屏幕处理单个组件的样式，并不影响其他TextStyle 类或容器小部件的样式。
现在，假设我们希望在整个应用中共享一个特定的主题--包括颜色、亮度、重量、图标样式和文本样式。我们可以使用ThemeData 类来实现这一点，它为我们提供了许多功能来满足我们的口味。
考虑一下下面的代码块。
MaterialApp(
title: 'Guide to Theming in Flutter',
theme: ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.lightBlue[800],
accentColor: Colors.cyan[600],
fontFamily: 'Georgia',
textTheme: TextTheme(
headline1: TextStyle(fontSize: 50, fontWeight: FontWeight.bold),
headline6: TextStyle(fontSize: 30.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 18.0, fontFamily: 'Hind'),
),
),
home: MyHomePage(),
);
ThemeData 类提供了我们可以修改的属性，以调整我们应用程序的主题。brightness 属性处理主题的整体亮度，并影响应用程序中的文本颜色，因为文本颜色在Brightness.light 中变成黑色，在Brightness.dark 中变成白色。
primaryColor 属性影响应用程序重要部分的背景颜色，包括工具条、标签条和应用程序条。
accentColor 属性影响小工具的前景色，也指辅助色。字体家族以及textTheme 的不同类别都被修改了，如上面的代码块所示。
Flutter默认为每个headline 和bodyText 类别赋值，但每个类别都可以调整以适应我们的设计品味。
要在应用程序的任何部分具体使用任何已声明的主题，我们只需调用我们想要的那一个，如下图所示。
Container(
color: Theme.of(context).accentColor,
child: Text(
'Theming in Flutter',
style: Theme.of(context).textTheme.headline6,
),
),
上面，我们用声明的headline6 ，意味着字体大小将是36，字体风格将是斜体。这种样式设计方法相当方便，如果我们单独为每个人设计样式，可以减少在整个应用程序中重复的代码行的数量。
浅色和深色主题模式
我们要讨论的最后一种主题类型是Flutter应用程序的浅色和深色主题模式的实现。暗色主题模式通常用于应用程序中，以节省电池寿命的能量，并减少在低光物理环境中对眼睛的压力。
在本教程中，我们将利用adaptive_theme包来实现这一点。这个包提供了许多优秀的开箱即用的功能，以确保不同主题模式的顺利设置和过渡。它还能在每次应用程序重新启动时获得所使用的最新主题。
除了adaptive_theme之外，我们还将利用Riverpod包。
首先，在pubspec.yaml 文件的依赖项块下添加以下代码。
dependencies:
adaptive_theme: ^2.2.0
flutter_riverpod: ^0.14.0+3
在终端中运行flutter pub get 命令。这个命令将得到这两个软件包的下载，并准备在你的代码库中使用。
flutter pub get
前往main.dart 文件，导入adaptive_theme和Riverpod包。
import 'package:adaptive_theme/adaptive_theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
创建一个名为savedThemeMode 的变量，以便在应用程序重新启动时访问用户最近使用的模式。使主块异步化，等待adaptive_theme包提供的getThemeMode 函数。
接下来要做的是将整个应用程序包裹在一个ProviderScope 类中，以访问应用程序中使用的提供者。
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
final savedThemeMode = await AdaptiveTheme.getThemeMode();
runApp(ProviderScope(child: MyApp(savedThemeMode: savedThemeMode)));
}
创建一个变量来接收来自上面主块的savedThemeMode 。用一个adaptive_theme类包裹整个MaterialApp ，这让我们可以访问它的属性，这样我们就可以为应用程序定制浅色和深色主题模式。
class MyApp extends StatelessWidget {
final AdaptiveThemeMode? savedThemeMode;
// ignore: use_key_in_widget_constructors
const MyApp({this.savedThemeMode});
@override
Widget build(BuildContext context) {
return AdaptiveTheme(
light: ThemeData(
brightness: Brightness.light,
primaryColor: Colors.green,
scaffoldBackgroundColor: Colors.white,
),
dark: ThemeData(
brightness: Brightness.dark,
primaryColor: Colors.red,
scaffoldBackgroundColor: Colors.black,
iconTheme: const IconThemeData(
color: Colors.black,
),
),
我们将ThemeData 传递给light 属性的adaptive_theme 类，我们将所有我们希望定制的变量放入其中。然后我们自定义brightness 、primaryColor 和scaffoldBackgroundColor 。同样的事情也会在dark 属性中进行。我们修改ThemeData 类里面的属性，并把它们传递给adaptive_theme提供的属性。
接下来是我们传入的初始属性savedThemeMode ，如果peradventure 是空的（例如，如果应用程序是新安装的），它就默认为浅色主题模式。然后，最后，我们将MaterialApp 类传递给builder 函数，并将声明的主题传递给其属性。
initial: savedThemeMode ?? AdaptiveThemeMode.light,
builder: (theme, dark) {
return MaterialApp(
title: 'Article Light/Dark Theme',
theme: theme,
darkTheme: dark,
home: const HomePage(),
);
},
);
}
}
为了在浅色和深色主题模式之间进行切换，我们将使用一个RawMaterialButton ，并将adaptive_theme的toggleMode 函数传递给它的onPressed 属性。这个按钮允许用户通过点击或敲击按钮在两种模式之间进行切换。
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Light/Dark theme in Flutter'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: RawMaterialButton(
child: const Text(
'Switch Modes',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
onPressed: () {
AdaptiveTheme.of(context).toggleThemeMode();
},
fillColor: Colors.green,
padding: const EdgeInsets.all(16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
),
],
),
);
}
}
最后，下面的图片显示了切换后的浅色和深色主题模式。
总结
定制各种属性以创建你想要的主题可能是相当令人兴奋的，特别是当它使应用程序与你的设计品味有关。利用你目前所学到的知识，你现在可以对单个类、容器小部件进行风格化处理，甚至给你的应用程序自定义明暗主题模式。
The postA guide to theming your app in Flutterappeared first onLogRocket Blog.
