Flutter Theme去统一修改它们的样式

35 min read
			Theme( 
              data: Theme.of(context).copyWith(
                buttonTheme: ButtonThemeData(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  minWidth: 64.0,
                  height: 30.0,
                  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                  shape:RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(4.0),
                  )
                ),
                textTheme: TextTheme(
                  button: TextStyle(
                    fontSize: 14.0,
                  )
                )
              ),
              child: Row(
                children: <Widget>[
                  FlatButton(
                    color: Color(0xFFF6F6F6),
                    onPressed: (){},
                    child: Text("联系客户"),
                  ),
                  ......
                  FlatButton(
                    color: Color(0xFFF6F6F6),
                    onPressed: (){},
                    child: Text("拒单"),
                  )
                ],
              ),
            )			

支持的属性

accentColor-Color类型,前景色(文本、按钮等)

accentColorBrightness-Brightness类型,accentColor的亮度,用于确定放置在突出颜色顶部的文本和图标颜色

backgroundColor-Color类型,与primaryColor对比的颜色(用作进度条的剩余部分)

buttonTheme-ButtonThemeData类型,定义了按钮等空间的默认配置

cardColor-Color类型,Material被用作Card时的颜色

dialogBackgroundColor-Color类型,dialog元素的背景色

disableColor-Color类型,用于Widget无效的颜色

dividerColor-Color类型,Dividers和PopupMenuDividers的颜色,也用于ListTiles中间和DataTables中间

errorColor-Color类型,用于输入验证错误的颜色,例如在TextField中

highlightColor-Color类型,用于类似墨水喷溅动画或指示菜单被选中的高亮色

hintColor-Color类型,用于提示文本占位符颜色,如TextField中

Platforn-TargetPlatform类型,Widget需要适配的目标类型

primaryColor-Color类型,App主要部分的背景色

primaryColorBrightness-Brightness类型,primaryColor的亮度

primaryColorDark-Color类型,primaryColor的较暗版本

primaryColorLight-Color类型,primaryColor的较亮版本

textTheme-TextTheme类型,与卡片和画布对比的文本样式

runtimeType-Type类型,便是对象运行时类型

从父级 Theme 扩展

Theme(
  // Find and extend the parent theme using `copyWith`. See the next
  // section for more info on `Theme.of`.
  data: Theme.of(context).copyWith(splashColor: Colors.yellow),
  child: const FloatingActionButton(
    onPressed: null,
    child: Icon(Icons.add),
  ),
);

使用定义好的 Theme

Container(
  color: Theme.of(context).colorScheme.secondary,
  child: Text(
    'Text with a background color',
    style: Theme.of(context).textTheme.headline6,
  ),
),

完整的示范

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appName = 'Custom Themes';

    return MaterialApp(
      title: appName,
      theme: ThemeData(
        // Define the default brightness and colors.
        brightness: Brightness.dark,
        primaryColor: Colors.lightBlue[800],

        // Define the default font family.
        fontFamily: 'Georgia',

        // Define the default `TextTheme`. Use this to specify the default
        // text styling for headlines, titles, bodies of text, and more.
        textTheme: const TextTheme(
          headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
          headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
          bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
        ),
      ),
      home: const MyHomePage(
        title: appName,
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({super.key, required this.title});

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