设计实用教程 | 使用 Theme 统一颜色和字体风格

最新推荐文章于 2024-01-26 15:36:22 发布

原创

最新推荐文章于 2024-01-26 15:36:22 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何使用 Flutter 的 Theme 来统一应用的颜色和字体风格，包括全局 Theme 和局部 Theme 的定义及使用方法。通过 ThemeData 创建 Theme，可自定义颜色和字体，使得整个 app 的设计保持一致性。全局 Theme 影响整个 app，而局部 Theme 可应用于特定组件。了解如何在 widget 中应用 Theme，以实现定制化的设计效果。

640?wx_fmt=jpeg

通过定义 Theme，我们可以更好地复用颜色和字体样式，从而让整个 app 的设计看起来更一致。全局 Theme 会在整个 app 范围内生效，而局部 Theme 只作用于特定元素。其实所谓的全局 Theme 和局部 Theme 的区别只在于，全局 Theme 定义在了 app 的 root 处而已。而 MaterialApp 已经事先为你预设了一个全局的 Theme Widget。

在定义一个 Theme 之后，我们可以让它在指定的 widgets （包括 Flutter 自带的 Material widgets，例如 AppBars、Buttons、Checkboxes 等等）中生效。

640?wx_fmt=png

1. 定义一个全局 Theme

全局 Theme 会影响整个 app 的颜色和字体样式。只需要向 MaterialApp 构造器传入 ThemeData 即可。

如果没有放置 Theme，Flutter 将会使用预设的样式。

MaterialApp(
  title: title,
  theme: ThemeData(
    // Define the default brightness and colors.
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],

    // Define the default font family.
    fontFamily: 'Montserrat',

    // Define the default TextTheme. Use this to specify the default
    // text styling for headlines,