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),
),
),
);
}
}