定制不同风格的App主题

定制不同风格的App主题

主题一般由 颜色、图片、字体、字号资源组成；现在越来越多APP都支持了黑夜主题，还有一些APP支持切换主题。所谓的切换主题就是在不同场景下，更新这些资源和配置。

Android 通过把配置信息则写入各个 style中，通过 activity 的 setTheme 进行切换主题；在Flutter 中则是通过ThemeData 来统一管理主题的配置信息。

ThemeData 涵盖了 Material Design 规范的可自定义部分样式，比如应用明暗模式 brightness、应用主色调 primaryColor、应用次级色调 accentColor、文本字体 fontFamily、输入框光标颜色 cursorColor 等。如果你想深入了解 ThemeData 的其他 API 参数，可以参考官方文档ThemeData。

定制全局的布局风格

在APP开发中，我们都知道首先要 指定主题的风格，包括 App 的主题色、字体等，在Flutter 中可以通过 MaterialApp widget 下的 theme来设置。

// 改变一下主题
class ThemeDemo2 extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
          brightness: Brightness.dark, // 改变主题为深色
          primaryColor: Colors.cyan, //修改主色调为青色
          iconTheme: IconThemeData(color: Colors.red), // 按钮主题的颜色，改成了红色
          textTheme: TextTheme(
              bodyText2: TextStyle(color: Colors.deepPurple)) // 文字的颜色改成了紫色
      ),
      home: Home1(title: "改变主题颜色",),
    );
  }
}

我们可以对比一下，更改主题前后的区别：

可以看到，修改的主题为深色模式，主色调为青色了、按钮的主题颜色也修改了，还有文本的颜色也改了。看起来还是挺简单的。

主题的复用

有时候我们想复用主题的颜色、字体样式，改怎么办呢？

通过Theme.of(context) 方法，取出对应的属性，然后使用到对应的地方。Theme.of(context)获取的父容器的主题样式。

为不同的平台定制不同的主题

有时候在开发中，我们需要为不同的平台配置不同的主题，这时候怎么办呢？

我们可以根据 defaultTargetPlatform 来判断当前应用所运行的平台，从而根据系统类型来设置对应的主题。以后有需要区分当前是哪个平台，都可以使用 defaultTargetPlatform 来完成判断。

class ThemeDemo4 extends StatelessWidget {
// iOS亮色主题
  final ThemeData kIOSTheme = ThemeData(
      brightness: Brightness.light,
      //亮色主题
      accentColor: Colors.white,
      //(按钮)Widget前景色为白色
      primaryColor: Colors.blue,
      //主题色为蓝色
      iconTheme: IconThemeData(color: Colors.grey),
      //icon主题为灰色
      textTheme: TextTheme(bodyText2: TextStyle(color: Colors.black)) //文本主题为黑色
      );

// Android深色主题
  final ThemeData kAndroidTheme = ThemeData(
      brightness: Brightness.dark,
      //深色主题
      accentColor: Colors.black,
      //(按钮)Widget前景色为黑色
      primaryColor: Colors.cyan,
      //主题色Wie青色
      iconTheme: IconThemeData(color: Colors.blue),
      //icon主题色为蓝色
      textTheme: TextTheme(bodyText2: TextStyle(color: Colors.red)) //文本主题色为红色
      );

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: defaultTargetPlatform == TargetPlatform.android
          ? kAndroidTheme
          : kIOSTheme,
      home: Home1(
        title: "不同平台，不同主题",
      ),
    );
  }
}

总结

通过对 主题 的学习，了解到了 如何去定制一个主题，指定 是亮色还是暗色模式、字体样式、主色调等；然后通过 Theme.of(context) 方法拿到父widget 的主题，再获取到对应的属性进行复用；最后 通过 defaultTargetPlatform 获取到当前运行的平台，为不同的平台 设置不同的主题，完成了根据平台，展示不同主题。