Flutter颜色和主题

Imagine you just got a new apartment, and you want to beautify the interior. Your first move is to choose color combinations for the entire apartment, right? Just like how colors can transform the vibe of your living space, they can also create a unique atmosphere in your app.

想象一下，你刚买了一套新公寓，你想要美化内部。你的第一步是为整个公寓选择颜色组合，对吗?就像颜色可以改变你生活空间的氛围一样，它们也可以在你的应用程序中创造一种独特的氛围。

In Flutter, colors are more than just red, blue, or green. They are your artistic palette, allowing you to infuse life and personality into your app. But how do you choose the right colors and maintain a consistent look? This is where themes come into play.

在Flutter中，颜色不仅仅是红色、蓝色或绿色。它们是你的艺术调色板，让你为你的应用注入生命和个性。但你如何选择正确的颜色并保持一致的外观?这就是主题发挥作用的地方。

The Color class

颜色类

Colors play a fundamental role in designing an attractive and engaging app interface. They are represented using the Color class. Think of colors as the paint you used to bring elegance to your app's user interface.

颜色在设计有吸引力和引人入胜的应用程序界面中起着根本性的作用。它们使用颜色类来表示。把颜色看作是为应用程序用户界面增添优雅的颜料。

Color representation

颜色表示法

Colors are defined using hexadecimal values. A hexadecimal color value is composed of three or four parts: a hash symbol (#), red ®, green (G), blue (B), and sometimes alpha (A) for opacity.

颜色是用十六进制值定义的。十六进制颜色值由三或四个部分组成：哈希符号 (#)、红色 ®、绿色 (G)、蓝色 (B)，有时还有表示不透明度的 alpha (A)。

Here's a simple representation of a hexadecimal color value: #RRGGBB or #AARRGGBB (with alpha).

下面是十六进制颜色值的简单表示： #RRGGBB 或 #AARRGGBB（带 alpha）。

Using predefined colors

使用预定义的颜色

Flutter provides a set of predefined colors that you can directly use. These colors are part of the Colors class:

Flutter 提供了一组预定义颜色，您可以直接使用。这些颜色是 Colors 类的一部分：

Color redColor = Colors.red;
Color blueColor = Colors.blue;
Color greenColor = Colors.green;

Creating custom colors

创建自定义颜色

If you need a specific color that's not in the predefined set, you can create a custom color using the Color class:

如果您需要的特定颜色不在预定义的颜色集中，您可以使用颜色类创建自定义颜色：

Color customColor = Color(0xFFAABBCC);

In this example, 0xFF represents the alpha value (opacity), and AABBCC represents the RGB values.

在本例中，0xFF 表示 alpha 值（不透明度），AABBCC 表示 RGB 值。

Using colors in widgets

在部件中使用颜色

Colors can be applied to various widgets to style your app's UI elements. For instance, you can set the background color of a container:

可以将颜色应用到各种部件中，为应用程序的 UI 元素设计风格。例如，您可以设置容器的背景颜色：

Container(
  color: Colors.blue,
  child: Text('Hello Flutter'),
)

Creating a gradient

创建渐变

Colors can also be used to create gradients, which are smooth transitions between two or more colors. Gradients are commonly used for backgrounds or to add depth to UI elements.

颜色还可用于创建渐变，即两种或多种颜色之间的平滑过渡。渐变通常用于背景或增加用户界面元素的深度。

Here's how to create a linear gradient:

下面介绍如何创建线性渐变：

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
    	colors: [Colors.blue, Colors.green],
    	begin: Alignment.topLeft,
    	end: Alignment.bottomRight,
  	),
  ),
  child: Text('Gradient Example'),
)

In this example, the LinearGradient widget creates a smooth transition from blue to green from the top left to the bottom right of the container.

在本例中，LinearGradient widget 创建了一个从容器左上方到右下方从蓝色到绿色的平滑过渡。

Color opacity (Alpha)

颜色不透明度（Alpha）

The alpha value of a color determines its opacity. An alpha value of 0xFF means fully opaque, while an alpha value of 0x00 means fully transparent. This can be useful when you want to create overlays or highlight certain UI elements.

颜色的 alpha 值决定其不透明度。alpha 值为 0xFF 表示完全不透明，而 alpha 值为 0x00 表示完全透明。当你想创建叠加效果或突出某些用户界面元素时，这一点会非常有用。

Flutter's Colors class also provides predefined colors with different opacities, such as Colors.red.withOpacity(0.5).

Flutter 的颜色类还提供了具有不同不透明度的预定义颜色，例如 Colors.red.withOpacity(0.5)。

Themes: A unified color scheme

主题 统一的配色方案

Think of a theme as a set of design choices that give your app a coherent appearance. It's like picking the perfect paint colors for your new apartment to create a consistent and pleasing environment. In Flutter, a theme includes colors, typography, and other visual elements that define your app's style.

将主题视为一组设计选择，可为您的应用程序提供一致的外观。这就好比为您的新公寓挑选完美的油漆颜色，以创造一个一致、愉悦的环境。在 Flutter 中，主题包括颜色、排版和其他定义应用程序风格的视觉元素。

Creating a consistent app theme with ThemeData

使用主题数据创建一致的应用程序主题

Imagine furnishing a new apartment---selecting paint colors, furniture, and decorations that sync to create a cohesive and appealing ambiance. Similarly, in app development, maintaining a unified visual style enhances the user experience. Flutter offers powerful styling and theming options, allowing you to effortlessly achieve a polished and consistent look across your app's UI elements.

试想一下，在装修新公寓时，油漆颜色、家具和装饰品的选择要同步进行，这样才能营造出一个有凝聚力和吸引力的氛围。同样，在应用程序开发中，保持统一的视觉风格也能增强用户体验。Flutter 提供强大的样式和主题选项，让您毫不费力地在应用程序的 UI 元素中实现光鲜一致的外观。

Defining an app-wide theme

定义全应用程序主题

To establish a consistent theme throughout your app, provide a ThemeData instance to the MaterialApp constructor. This encapsulates various stylistic attributes, like colors, typography, and more.

要在整个应用中建立一致的主题，请向 MaterialApp 构造函数提供一个 ThemeData 实例。它封装了各种风格属性，如颜色、排版等。

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
    	brightness: Brightness.dark,
    	primaryColor: Colors.lightBlue[800],
    	fontFamily: 'Georgia',
    	textTheme: const TextTheme(
    		displayLarge: TextStyle(fontSize: 70, fontWeight: FontWeight.bold),
    		titleLarge: TextStyle(fontSize: 34, fontStyle: FontStyle.italic),
		    bodyMedium: TextStyle(fontSize: 12, fontFamily: 'Roboto'),
    	),
    ),
    home: LoginScreen(),
  ));
}

In this example, we define a cohesive theme using ThemeData. The theme includes brightness, primary color, font preferences, and various text styles tailored for different parts of the app.

在本例中，我们使用 ThemeData 定义了一个具有凝聚力的主题。主题包括亮度、主色调、字体偏好以及为应用程序不同部分量身定制的各种文本样式。

Custom themes for specific parts

为特定部件定制主题

To further refine your app's style, you can apply unique themes to specific sections using the Theme widget.

为了进一步完善应用程序的风格，您可以使用主题部件为特定部分应用独特的主题。

Unique ThemeData

独特的主题数据

If you want a distinct theme for a specific widget or section, you can create a new ThemeData instance and use it within the Theme widget:

如果您想为特定 widget 或部分创建一个独特的主题，可以创建一个新的 ThemeData 实例，并在主题 widget 中使用：

Theme(
  data: ThemeData(
  	splashColor: Colors.green,
  ),
  child: FloatingActionButton(
  	onPressed: () {},
  	child: const Icon(Icons.add),
  ),
);

Extending the Parent Theme

扩展父主题

For minor adjustments, it's often practical to extend the parent theme. The copyWith() method lets you maintain most attributes from the parent theme while selectively modifying specific properties:

在进行微小调整时，扩展父主题通常是非常实用的。使用 copyWith() 方法可以保留父主题的大部分属性，同时有选择地修改特定属性：

Theme(
  data: Theme.of(context).copyWith(splashColor: Colors.yellow),
  child: const FloatingActionButton(
    onPressed: null,
    child: Icon(Icons.add),
  ),
);

Applying a theme

应用主题

After defining a theme, you can easily utilize its attributes within widget build() methods by invoking Theme.of(context). This function searches the widget tree to find the nearest Theme.

定义主题后，您可以通过调用 Theme.of(context)，在部件构建()方法中轻松使用其属性。该函数会搜索部件树，以找到最近的主题。

For example, you can leverage theme colors and text styles as follows:

例如，您可以使用以下主题颜色和文本样式：

Container(
  color: Theme.of(context).colorScheme.secondary,
  child: Text(
    'Text with a background color',
    style: Theme.of(context).textTheme.headline6,
  ),
);