Flutter开发(19)- 主题风格

在Flutter开发中,我们可以通过定义 Theme,复用颜色和字体样式,从而让整个app的设计看起来更一致。

一. Theme主题的使用

Theme分为:全局Theme和局部Theme

主题有两个作用:

    设置了主题之后,某些Widget会自动使用主题的样式(比如AppBar的颜色)

    将某些样式放到主题中统一管理,在应用程序的其它地方直接引用

1.1. 全局Theme

全局Theme会影响整个app的颜色和字体样式。

使用起来非常简单,只需要向MaterialApp构造器传入 ThemeData 即可。

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

    当然,我们可以对它进行定制。

class MyApp extends StatelessWidget {

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      theme: ThemeData(

        // 1.亮度: light-dark

        brightness: Brightness.light,

        // 2.primarySwatch: primaryColor/accentColor的结合体

        primarySwatch: Colors.red,

        // 3.主要颜色: 导航/底部TabBar

        primaryColor: Colors.pink,

        // 4.次要颜色: FloatingActionButton/按钮颜色

        accentColor: Colors.orange,

        // 5.卡片主题

        cardTheme: CardTheme(

          color: Colors.greenAccent,

          elevation: 10,

          shape: Border.all(width: 3, color: Colors.red),

          margin: EdgeInsets.all(10)

        ),

        // 6.按钮主题

        buttonTheme: ButtonThemeData(

          minWidth: 0,

          height: 25

        ),

        // 7.文本主题

        textTheme: TextTheme(

          title: TextStyle(fontSize: 30, color: Colors.blue),

          display1: TextStyle(fontSize: 10),

        )

      ),

      home: HYHomePage(),

    );

  }

}

1.2. 局部Theme

如果某个具体的Widget不希望直接使用全局的Theme,而希望自己来定义,应该如何做呢?

    非常简单,只需要在Widget的父节点包裹一下Theme即可

创建另外一个新的页面,页面中使用新的主题:

    在新的页面的Scaffold外,包裹了一个Theme,并且设置data为一个新的ThemeData

class HYSecondPage extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Theme(

      data: ThemeData(),

      child: Scaffold(

      ),

    );

  }

}

但是,我们很多时候并不是想完全使用一个新的主题,而且在之前的主题基础之上进行修改:

class HYSecondPage extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return Theme(

      data: Theme.of(context).copyWith(

        primaryColor: Colors.greenAccent

      ),

      child: Scaffold(

      ),

    );

  }

}

1.3. Flutter中文网错误

但是这里有一个注意事项:accentColor在这里并不会被覆盖。

为什么不能覆盖呢?https://github.com/material-components/material-components-flutter-codelabs/issues/106

我摘抄一点官方人员的回复:

其实官网文档中之前也出现了类似的错误,比如Flutter中文网之前是翻译官方文档的

https://flutterchina.club/cookbook/design/themes/其中就有该错误

后来官网文档中对这个问题进行了修正:

二. 暗黑Theme适配

2.1. darkTheme

目前很多应用程序都需要适配暗黑模式,Flutter中如何做到暗黑模式的适配呢?

事实上,MaterialApp中有theme和dartTheme两个参数:

    按照下面的写法,我们已经默认适配了暗黑主题

class MyApp extends StatelessWidget {

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      theme: ThemeData.light(),

      darkTheme: ThemeData.dark(),

      home: HYHomePage(),

    );

  }

}

2.2. 开发中适配

在开发中,为了能适配两种主题(设置是更多的主题),我们可以封装一个AppTheme

    1.公共的样式抽取成常量

    2.封装一个亮色主题

    3.封装一个暗黑主题

import'package:flutter/material.dart';

class AppTheme {

  // 1.抽取相同的样式

  staticconstdouble _titleFontSize = 20;

  // 2.亮色主题

  staticfinal ThemeData lightTheme = ThemeData(

    primarySwatch: Colors.pink,

    primaryTextTheme: TextTheme(

      title: TextStyle(

        color: Colors.yellow,

        fontSize: _titleFontSize

      )

    ),

    textTheme: TextTheme(

      body1: TextStyle(color: Colors.red)

    )

  );

 // 3.暗黑主题

  staticfinal ThemeData darkTheme = ThemeData(

    primaryColor: Colors.grey,

    primaryTextTheme: TextTheme(

      title: TextStyle(

        color: Colors.white,

        fontSize: _titleFontSize

      )

    ),

    textTheme: TextTheme(

      title: TextStyle(color: Colors.white),

      body1: TextStyle(color: Colors.white70)

    )

  );

}

在MaterialApp中,可以决定使用哪一个主题:

class MyApp extends StatelessWidget {

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter Demo',

      theme: AppTheme.lightTheme,

      darkTheme: AppTheme.darkTheme,

      home: HYHomePage(),

    );

  }

}

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 213,335评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,895评论 3 387
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,766评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,918评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,042评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,169评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,219评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,976评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,393评论 1 304
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,711评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,876评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,562评论 4 336
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,193评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,903评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,142评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,699评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,764评论 2 351

推荐阅读更多精彩内容