关于flutter:flutter系列之在flutter中自定义themes

简介

个别状况下咱们在 flutter 中搭建的 app 基本上都是用的是 MaterialApp 这种设计模式，MaterialApp 中为咱们接下来应用的按钮，菜单等提供了对立的款式，那么这种款式能不能进行批改或者自定义呢？

答案是必定的，一起来看看吧。

MaterialApp 中的 themes

MaterialApp 也是一种 StatefulWidget, 在 MaterialApp 中跟 theme 相干的属性有这样几个：

  final ThemeData? theme;
  final ThemeData? darkTheme;
  final ThemeData? highContrastTheme;
  final ThemeData? highContrastDarkTheme;
  final ThemeMode? themeMode;

先来看下 ThemeMode 的定义：

enum ThemeMode {
  system,
  light,
  dark,
}

ThemeMode 是一个枚举类，外面有三个枚举值，别离是 system，light 和 dark。

咱们都晓得当初手机有一个暗黑模式，ThemeMode 的这三种模式就是为了适应暗黑模式而生的。

system 示意是零碎默认的模式，light 是亮堂模式，dark 是暗黑模式。

而 ThemeData 则定义了主题中各种组件或者口头的配色。

那么如果咱们想要实现自定义 themes 的性能，就能够利用这个 ThemeData 类来重写其中要重写的色彩。

ThemeData 中还有专门为 color 变动定义的 ColorScheme，还有为 Text 变动设置的 TextTheme，这两个 theme 实际上是一系列的 color 汇合。

除了 ThemeData，flutter 中还有一个类叫做 Theme。

Theme 是一个 StatelessWidget，这个 widget 中蕴含了 ThemeData，它提供了一个 Theme.of 办法来让子 widget 取得最近的 ThemeData 数据。

这就意味着，在 flutter 中，子 widget 能够应用和父 widget 不同的主题，十分的棒。

自定义 themes 的应用

那么如何应用自定义 themes 呢？有两种形式。

第一种就是在应用 MaterialApp 的时候传入自定义的 themes，如下所示：

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(primarySwatch: Colors.blue,),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

然而这种操作理论是传入了一个全新的 ThemeData，如果咱们只想批改局部 ThemeData 中的数据应该如何解决呢？

咱们能够应用 Theme.of 办法从以后的 Theme 中拷贝一份，而后再调用 copyWith 办法，传入要批改的自定义属性即可。

如下所示：

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: Theme.of(context).copyWith(useMaterial3: true),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

后面咱们提到了 Theme 这个 widget，咱们还能够将要自定义 Theme 的 widget 用 Theme 包裹起来，实践上咱们能够将任何 widget 都用 Theme 来进行包装。

比方之前的 floatingActionButton 的实现是间接返回一个 FloatingActionButton：

floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        )

而后咱们能够把 FloatingActionButton 用 Theme 包装起来，如下所示：

floatingActionButton: Theme(data: Theme.of(context).copyWith(focusColor: Colors.yellow),
        child: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ),
      )

这样不同的组件就领有了不同的 theme。

总结

当咱们须要自定义 theme 或者不同 theme 的时候，就能够思考应用本文中应用的办法来进行 theme 的自定义了。

本文的例子：https://github.com/ddean2009/learn-flutter.git