根据一个完整项目学习Flutter—1、使用主题共享颜色和字体样式(ThemeData)

项目地址
本文转自 Flutter中文网 主要用于记录学习以及方便自己后续查找资料
通过一个完整的项目依次分析整理相关的知识点 本文主要分析使用主题共享颜色和字体样式

为了在整个应用中共享颜色和字体样式,我们可以使用主题。定义主题有两种方式:全局主题或使用Theme来定义应用程序局部的颜色和字体样式。 事实上,全局主题只是由应用程序根MaterialApp创建的Theme !

定义一个主题后,我们可以在我们自己的Widgets中使用它。另外,Flutter提供的Material Widgets将使用我们的主题为AppBars、Buttons、Checkboxes等设置背景颜色和字体样式。

创建应用主题

为了在整个应用程序中共享包含颜色和字体样式的主题,我们可以提供ThemeDataMaterialApp的构造函数。

如果没有提供theme,Flutter将创建一个默认主题。

new MaterialApp(
  title: title,
  theme: new ThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.lightBlue[800],
    accentColor: Colors.cyan[600],
  ),
);

局部主题

如果我们想在应用程序的一部分中覆盖应用程序的全局的主题,我们可以将要覆盖得部分封装在一个Theme Widget中。

有两种方法可以解决这个问题:创建特有的ThemeData或扩展父主题。

创建特有的 ThemeData

如果我们不想继承任何应用程序的颜色或字体样式,我们可以通过new ThemeData()创建一个实例并将其传递给Theme Widget。

new Theme(
  // Create a unique theme with "new ThemeData"
  data: new ThemeData(
    accentColor: Colors.yellow,
  ),
  child: new FloatingActionButton(
    onPressed: () {},
    child: new Icon(Icons.add),
  ),
);
扩展父主题

扩展父主题时无需覆盖所有的主题属性,我们可以通过使用copyWith方法来实现。

new Theme(
  // Find and Extend the parent theme using "copyWith". Please see the next 
  // section for more info on `Theme.of`.
  data: Theme.of(context).copyWith(accentColor: Colors.yellow),
  child: new FloatingActionButton(
    onPressed: null,
    child: new Icon(Icons.add),
  ),
);

使用主题

现在我们已经定义了一个主题,我们可以在Widget的build方法中通过Theme.of(context)函数使用它!

Theme.of(context)将查找Widget树并返回树中最近的Theme。如果我们的Widget之上有一个单独的Theme定义,则返回该值。如果不是,则返回App主题。 事实上,FloatingActionButton真是通过这种方式找到accentColor的!

下面看一个简单的示例:

new Container(
  color: Theme.of(context).accentColor,
  child: new Text(
    'Text with a background color',
    style: Theme.of(context).textTheme.title,
  ),
);

完整例子

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appName = 'Custom Themes';

    return new MaterialApp(
      title: appName,
      theme: new ThemeData(
        brightness: Brightness.dark,
        primaryColor: Colors.lightBlue[800],
        accentColor: Colors.cyan[600],
      ),
      home: new MyHomePage(
        title: appName,
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, @required this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(title),
      ),
      body: new Center(
        child: new Container(
          color: Theme.of(context).accentColor,
          child: new Text(
            'Text with a background color',
            style: Theme.of(context).textTheme.title,
          ),
        ),
      ),
      floatingActionButton: new Theme(
        data: Theme.of(context).copyWith(accentColor: Colors.yellow),
        child: new FloatingActionButton(
          onPressed: null,
          child: new Icon(Icons.add),
        ),
      ),
    );
  }
}

以上内容转自 Flutter中文网

参阅ThemeData文档以查看您可以定义的所有颜色和字体。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 原文在此,此处只为学习 Widget与ElementWidget主要接口Stateless WidgetState...
    lltree阅读 4,529评论 0 1
  • 在Flutter中使用ThemeData来在应用中共享颜色和字体样式,Theme有两种:全局Theme和局部The...
    Magician阅读 21,873评论 7 34
  • Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可...
    Cat9527阅读 701评论 0 1
  • 作者: Mike Bluestein | 译:孙印凤 原文地址: [https://www.smashingmag...
    格老子阅读 3,502评论 0 6
  • 国庆后面两天在家学习整理了一波flutter,基本把能撸过能看到的代码都过了一遍,此文篇幅较长,建议保存(star...
    Nealyang阅读 4,369评论 1 17