Flutter 之 ColorBook 主题设计

This cookbook contains recipes that demonstrate how to solve common problems while writing Flutter apps. Each recipe is self-contained and can be used as a reference to help you build up an application.

CookBook 包含了编写Flutter应用程序时常见问题及示列，每个主题都是独立的

### 设计基础 – 使用主题共享颜色和字体样式

为什么要共享颜色和字体样式呢？在开发过程中，我们是需要统一一个APP的主题和APP中使用的字体样式

定义主题的方式有两种
1. 全局主题
2. 使用Theme来定义应用程序局部的颜色和字体样式，全局主题只是由应用程序根MaterialApp 创建的Theme
  - 创建应用主题

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

- 局部主题

如果我们想在应用程序的一部分中覆盖应用程序的全局的主题，我们可以将要覆盖得部分封装在一个Theme Widget中。有两种方法可以解决这个问题：创建特有的ThemeData或扩展父主题。

- 创建特有的ThemeData

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，
简单示列

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

完整的列子

“` 这里写图片描述

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

MyTheme getInstance() {
  return new MyTheme();
}

class MyTheme extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appName = '自定义主题';

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

class HomePage extends StatelessWidget {
  final String title;

  HomePage({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(
            '由背景的文字',
            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 框架、基础介绍

我学习的整个过程的项目地址 https://github.com/kongxiaoan/flutter_app

支持原创转载请注明图你怀中安稳 https://blog.csdn.net/qq_32648731/article/details/80007499

Flutter 之 ColorBook 主题设计

猜你喜欢