程序员如果敲一会就停半天,抱着一杯茶,表情拧巴,那才是在编程
重要消息
在Flutter3.3版本以上,支持Material3,使用Material3样式首先是要配置启用Material3。
Material3 主要体现在 圆角风格、颜色、文本样式等方面。
1 配置启用 Material3
查看当前 Flutter的版本
![在这里插入图片描述 Flutter3.3对Material3设计风格的支持_sed](//dev-img.mos.moduyun.com/20231025/eac0634c-266e-4086-9d0d-4712ebf8a6a7.png)
在程序的入口 MaterialApp中设置主题ThemeData中的useMaterial3属性为true.
///flutter应用程序中的入口函数
void main() => runApp(TextApp());
///应用的根布局
class TextApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
///构建Materia Desin 风格的应用程序
return MaterialApp(
title: "Material3",
///在主题中启用
theme: ThemeData(
brightness: Brightness.light,
colorSchemeSeed: Colors.blue,
//启用
useMaterial3: true,
),
///默认的首页面
home: Material3Home(),
);
}
}
2 按钮样式的改变
按钮默认的圆角大小改变
2.1 ElevatedButton
ElevatedButton(
onPressed: (){},
child: const Text("Elevated"),
),
![在这里插入图片描述 Flutter3.3对Material3设计风格的支持_背景色_02](//dev-img.mos.moduyun.com/20231025/3b74fd1c-11cf-47d5-bd0e-c78e53d98099.png)
2.2 ElevatedButton 自定义样式
ElevatedButton 可通过 style 来设置样式,onPrimary 属性来设置前景色,比如这里的文本的颜色,primary 用来设置背景色,也就是这里的ElevatedButton按钮的填充颜色。
ElevatedButton(
style: ElevatedButton.styleFrom(
// 前景色
// ignore: deprecated_member_use
onPrimary: Theme.of(context).colorScheme.onPrimary,
// 背景色
// ignore: deprecated_member_use
primary: Theme.of(context).colorScheme.primary,
).copyWith(elevation: ButtonStyleButton.allOrNull(0.0)),
onPressed: (){},
child: const Text('Filled'),
),
![在这里插入图片描述 Flutter3.3对Material3设计风格的支持_flutter_03](//dev-img.mos.moduyun.com/20231025/e67753f4-21f9-49c6-b518-265bbd805fb6.png)
2.3 OutlinedButton
OutlinedButton(
onPressed: (){},
child: const Text("Outlined"),
),
![在这里插入图片描述 Flutter3.3对Material3设计风格的支持_sed_04](//dev-img.mos.moduyun.com/20231025/8467b187-cf99-4152-aa78-bac1556f3ee4.png)
2.4 FloatingActionButton.small
FloatingActionButton.small(
onPressed: () {},
child: const Icon(Icons.add),
),
![在这里插入图片描述 Flutter3.3对Material3设计风格的支持_android_05](//dev-img.mos.moduyun.com/20231025/44050df6-af66-4803-83fb-7e058b6620af.png)
2.5 FloatingActionButton
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),
),
![在这里插入图片描述 Flutter3.3对Material3设计风格的支持_ico_06](//dev-img.mos.moduyun.com/20231025/5de7650d-d850-459d-9529-2606f6a449cb.png)
2.6 FloatingActionButton.extended
FloatingActionButton.extended(
onPressed: () {},
icon: const Icon(Icons.add),
label: const Text("Create"),
),
![在这里插入图片描述 Flutter3.3对Material3设计风格的支持_flutter_07](//dev-img.mos.moduyun.com/20231025/10a13250-238a-4c0d-a02a-d656eba461f5.png)
2.7 FloatingActionButton.large
FloatingActionButton.large(
onPressed: () {},
child: const Icon(Icons.add),
),
![在这里插入图片描述 Flutter3.3对Material3设计风格的支持_ico_08](//dev-img.mos.moduyun.com/20231025/f997cf04-5b7c-458c-b96c-2c4779b4d2b0.png)
3 AlertDialog 的边框圆角改变
void openDialog(BuildContext context) {
showDialog<void>(
context: context,
builder: (context) => AlertDialog(
title: const Text("Basic Dialog Title"),
content: const Text(
"A dialog is a type of modal window that appears in front of app content to provide critical information, or prompt for a decision to be made."),
actions: <Widget>[
TextButton(
child: const Text('Dismiss'),
onPressed: () => Navigator.of(context).pop(),
),
TextButton(
child: const Text('Action'),
onPressed: () => Navigator.of(context).pop(),
),
],
),
);
}
![在这里插入图片描述 Flutter3.3对Material3设计风格的支持_背景色_09](//dev-img.mos.moduyun.com/20231025/2553f072-aade-47fa-8cb3-df87eb58edf9.png)
4 主题文本样式的默认大小改变
class TextStyleExample extends StatelessWidget {
const TextStyleExample({
super.key,
required this.name,
required this.style,
});
final String name;
final TextStyle style;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Text(name, style: style),
);
}
}
然后对应的 TextTheme 中不同的文本样式的大小
class TypographyScreen extends StatelessWidget {
const TypographyScreen({super.key});
@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context)
.textTheme
.apply(displayColor: Theme.of(context).colorScheme.onSurface);
return Expanded(
child: ListView(
children: <Widget>[
const SizedBox(height: 7),
TextStyleExample(
name: "Display Large", style: textTheme.displayLarge!),
TextStyleExample(
name: "Display Medium", style: textTheme.displayMedium!),
TextStyleExample(
name: "Display Small", style: textTheme.displaySmall!),
TextStyleExample(
name: "Headline Large", style: textTheme.headlineLarge!),
TextStyleExample(
name: "Headline Medium", style: textTheme.headlineMedium!),
TextStyleExample(
name: "Headline Small", style: textTheme.headlineSmall!),
TextStyleExample(name: "Title Large", style: textTheme.titleLarge!),
TextStyleExample(name: "Title Medium", style: textTheme.titleMedium!),
TextStyleExample(name: "Title Small", style: textTheme.titleSmall!),
TextStyleExample(name: "Label Large", style: textTheme.labelLarge!),
TextStyleExample(name: "Label Medium", style: textTheme.labelMedium!),
TextStyleExample(name: "Label Small", style: textTheme.labelSmall!),
TextStyleExample(name: "Body Large", style: textTheme.bodyLarge!),
TextStyleExample(name: "Body Medium", style: textTheme.bodyMedium!),
TextStyleExample(name: "Body Small", style: textTheme.bodySmall!),
],
),
);
}
}
![在这里插入图片描述 Flutter3.3对Material3设计风格的支持_背景色_10](//dev-img.mos.moduyun.com/20231025/d41a08ad-706b-4a54-b138-4a2ef7468d5d.png)
5 ColorScheme 的变更
Widget buildMaterial() {
///当前颜色主题
ColorScheme colorScheme = Theme.of(context).colorScheme;
//背景色
final Color color = colorScheme.surface;
//阴影色
Color shadowColor = colorScheme.shadow;
Color surfaceTint = colorScheme.primary;
return Material(
borderRadius: BorderRadius.all(Radius.circular(4.0)),
elevation: 4,//阴影
color: color,//背景色
shadowColor: shadowColor,//阴影色
surfaceTintColor: surfaceTint,//
type: MaterialType.card,
child: Padding(
padding: const EdgeInsets.all(38.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'测试1',
style: Theme.of(context).textTheme.labelMedium,
),
Text(
'测试2',
style: Theme.of(context).textTheme.labelMedium,
),
],
),
),
);
}
![在这里插入图片描述 Flutter3.3对Material3设计风格的支持_背景色_11](//dev-img.mos.moduyun.com/20231025/39b08a61-ddf4-4d58-8fce-65aca9e4ae15.png)
完毕