Flutter3.3对Material3设计风格的支持

程序员如果敲一会就停半天，抱着一杯茶，表情拧巴，那才是在编程

重要消息

• flutter从入门 到精通 系列文章

---

在Flutter3.3版本以上，支持Material3，使用Material3样式首先是要配置启用Material3。

Material3 主要体现在 圆角风格、颜色、文本样式等方面。

---

1 配置启用 Material3

查看当前 Flutter的版本

在程序的入口 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(),
);
}
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22

2 按钮样式的改变

按钮默认的圆角大小改变

2.1 ElevatedButton

ElevatedButton(
   onPressed: (){},
   child: const Text("Elevated"),
 ),

 
 
   
   
   
   

 
 
   
   
   
   

    
    
    
    
1
    
    
    
    
2
    
    
    
    
3
    
    
    
    
4
   
   
   
   

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'),
   ),

 
 
   
   
   
   

 
 
   
   
   
   

    
    
    
    
1
    
    
    
    
2
    
    
    
    
3
    
    
    
    
4
    
    
    
    
5
    
    
    
    
6
    
    
    
    
7
    
    
    
    
8
    
    
    
    
9
    
    
    
    
10
    
    
    
    
11
    
    
    
    
12
   
   
   
   

2.3 OutlinedButton

OutlinedButton(
     onPressed: (){},
     child: const Text("Outlined"),
   ),

 
 
   
   
   
   

 
 
   
   
   
   

    
    
    
    
1
    
    
    
    
2
    
    
    
    
3
    
    
    
    
4
   
   
   
   

2.4 FloatingActionButton.small

 FloatingActionButton.small(
    onPressed: () {},
    child: const Icon(Icons.add),
  ),

 
 
   
   
   
   

 
 
   
   
   
   

    
    
    
    
1
    
    
    
    
2
    
    
    
    
3
    
    
    
    
4
   
   
   
   

2.5 FloatingActionButton

FloatingActionButton(
   onPressed: () {},
   child: const Icon(Icons.add),
 ),

 
 
   
   
   
   

 
 
   
   
   
   

    
    
    
    
1
    
    
    
    
2
    
    
    
    
3
    
    
    
    
4
   
   
   
   

2.6 FloatingActionButton.extended

   FloatingActionButton.extended(
     onPressed: () {},
     icon: const Icon(Icons.add),
     label: const Text("Create"),
   ),

 
 
   
   
   
   

 
 
   
   
   
   

    
    
    
    
1
    
    
    
    
2
    
    
    
    
3
    
    
    
    
4
    
    
    
    
5
   
   
   
   

2.7 FloatingActionButton.large

  FloatingActionButton.large(
     onPressed: () {},
     child: const Icon(Icons.add),
   ),

 
 
   
   
   
   

 
 
   
   
   
   

    
    
    
    
1
    
    
    
    
2
    
    
    
    
3
    
    
    
    
4
   
   
   
   

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

 
 
   
   
   
   

 
 
   
   
   
   

  
  
 
 
   
   
   
   
 
 
   
   
   
   

    
    
    
    
1
    
    
    
    
2
    
    
    
    
3
    
    
    
    
4
    
    
    
    
5
    
    
    
    
6
    
    
    
    
7
    
    
    
    
8
    
    
    
    
9
    
    
    
    
10
    
    
    
    
11
    
    
    
    
12
    
    
    
    
13
    
    
    
    
14
    
    
    
    
15
    
    
    
    
16
    
    
    
    
17
    
    
    
    
18
    
    
    
    
19
    
    
    
    
20
   
   
   
   

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

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19

然后对应的 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!),
],
),
);
}
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38

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

 
 
   
   
   
   

 
 
   
   
   
   

  
  
 
 
   
   
   
   
 
 
   
   
   
   

    
    
    
    
1
    
    
    
    
2
    
    
    
    
3
    
    
    
    
4
    
    
    
    
5
    
    
    
    
6
    
    
    
    
7
    
    
    
    
8
    
    
    
    
9
    
    
    
    
10
    
    
    
    
11
    
    
    
    
12
    
    
    
    
13
    
    
    
    
14
    
    
    
    
15
    
    
    
    
16
    
    
    
    
17
    
    
    
    
18
    
    
    
    
19
    
    
    
    
20
    
    
    
    
21
    
    
    
    
22
    
    
    
    
23
    
    
    
    
24
    
    
    
    
25
    
    
    
    
26
    
    
    
    
27
    
    
    
    
28
    
    
    
    
29
    
    
    
    
30
    
    
    
    
31
    
    
    
    
32
    
    
    
    
33
   
   
   
   

---

完毕

参考

Flutter3.3对Material3设计风格的支持