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

flutter,系列,自定义,themes · 浏览次数 : 138

小编点评

**MaterialApp中的themes自定义themes的使用总结** **1. 定义** MaterialApp包含多个属性,用于定义主题,包括: * `theme`:用于当前页面的主题。 * `darkTheme`:用于暗黑模式的主题。 * `highContrastTheme`:用于高对比度的主题。 * `highContrastDarkTheme`:用于暗黑模式的主题。 * `themeMode`:用于设置主题模式的枚举值。 **2. 自定义themes的实现** 可以使用`Theme.of`方法从当前的Theme中获取数据,并通过`copyWith`方法创建一份新的ThemeData,其中可以进行自定义颜色设置。 **3. 使用自定义themes** 在使用MaterialApp的时候,可以传入自定义的themes,或通过`Theme.of`方法从当前的Theme中获取数据并创建一份新的ThemeData进行设置。 **4. 示例** 以下是一个示例,展示如何使用`Theme.of`方法从当前的Theme中创建一份新的ThemeData并设置颜色: ```dart Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const MyHomePage(title: 'Flutter Demo Home Page'), ); } ``` **5. 其他方法** 除了`Theme.of`方法,还可以使用`Theme` widget包裹任何widget,并将主题设置给widget的`data`属性。

正文

简介

一般情况下我们在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

与flutter系列之:在flutter中自定义themes相似的内容:

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

简介 一般情况下我们在flutter中搭建的app基本上都是用的是MaterialApp这种设计模式,MaterialApp中为我们接下来使用的按钮,菜单等提供了统一的样式,那么这种样式能不能进行修改或者自定义呢? 答案是肯定的,一起来看看吧。 MaterialApp中的themes Materia

flutter系列之:如何自定义动画路由

简介 flutter中有默认的Route组件,叫做MaterialPageRoute,一般情况下我们在flutter中进行跳转的话,只需要向Navigator中传入一个MaterialPageRoute就可以了。 但是MaterialPageRoute太普通了,如果我们想要做点不同的跳转特效应该如何

flutter系列之:做一个下载按钮的动画

[toc] # 简介 我们在app的开发过程中经常会用到一些表示进度类的动画效果,比如一个下载按钮,我们希望按钮能够动态显示下载的进度,这样可以给用户一些直观的印象,那么在flutter中一个下载按钮的动画应该如何制作呢? 一起来看看吧。 # 定义下载的状态 我们在真正开发下载按钮之前,首先定义几个

flutter系列之:如丝般顺滑的SliverAppBar

简介 对于一个APP来说,肯定会有一个AppBar,这个AppBar一般包含了APP的导航信息等。虽然我们可以用一个固定的组件来做为AppBar,但是这样就会丢失很多特效,比如将AppBar固定在顶部,AppBar可以在滑动的过程中进行大小变换等。 当然这一切都不需要自己来实现,flutter已经为

《吐血整理》高级系列教程-吃透Fiddler抓包教程(32)-Fiddler如何抓取IOS系统中Flutter应用程序的包

1.简介 上一篇讲解了安卓手机可以通过VPN代理来抓取Flutter应用程序的包,iOS(iphone)同样使用上一篇中VPN方法(原理与android是一致的),同样需要使用到VPN,在iOS也有许多与drony功能类似的软件,大家可以自己选择自己喜欢的使用,宏哥这里使用的是Shadowrocke

flutter系列之:在flutter中使用流式布局

简介 我们在开发web应用的时候,有时候为了适应浏览器大小的调整,需要动态对页面的组件进行位置的调整。这时候就会用到flow layout,也就是流式布局。 同样的,在flutter中也有流式布局,这个流式布局的名字叫做Flow。事实上,在flutter中,Flow通常是和FlowDelegate一

flutter系列之:在flutter中使用导航Navigator

简介 一个APP如果没有页面跳转那么是没有灵魂的,页面跳转的一个常用说法就是Navigator,flutter作为一个最为优秀的前端框架,Navigator肯定是必不可少的,那么在flutter中如何使用Navigator呢? 一起来看看吧。 flutter中的Navigator Navigator

flutter系列之:在flutter中使用媒体播放器

简介 现在的app功能越来越强大,除了基本的图文之外,还需要各种各样的其他的功能,比如视频,和直播。 直播可能会比较复杂,因为涉及到了拉流和推流,需要服务器端的支持,但是视频播放就比较简单了,那么如何在flutter中使用媒体播放器呢? 一起来看看吧。 使用前的准备工作 flutter本身是不支持媒

flutter系列之:在flutter中使用相机拍摄照片

简介 在app中使用相机肯定是再平常不过的一项事情了,相机肯定涉及到了底层原生代码的调用,那么在flutter中如何快速简单的使用上相机的功能呢? 一起来看看吧。 使用相机前的准备工作 flutter中为使用camera提供了一个叫做camera的插件,我们首先需要安装这个插件。 安装插件的步骤很简

flutter系列之:flutter中的变形金刚Transform

简介 虽然我们在开发APP的过程中是以功能为主,但是有时候为了美观或者其他的特殊的需求,需要对组件进行一些变换。在Flutter中这种变换就叫做Transform。 flutter的强大之处在于,可以对所有的widget进行Transform,因此可以做出非常酷炫的效果。 Transform简介 在