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

在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(),

    );

  }

}

2 按钮样式的改变

按钮默认的圆角大小改变

2.1 ElevatedButton

ElevatedButton(

   onPressed: (){},

   child: const Text("Elevated"),

 ),

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

   ),

2.3 OutlinedButton

OutlinedButton(

     onPressed: (){},

     child: const Text("Outlined"),

   ),

2.4 FloatingActionButton.small

 FloatingActionButton.small(

    onPressed: () {},

    child: const Icon(Icons.add),

  ),

2.5 FloatingActionButton

FloatingActionButton(

   onPressed: () {},

   child: const Icon(Icons.add),

 ),

2.6 FloatingActionButton.extended

   FloatingActionButton.extended(

     onPressed: () {},

     icon: const Icon(Icons.add),

     label: const Text("Create"),

   ),

2.7 FloatingActionButton.large

  FloatingActionButton.large(

     onPressed: () {},

     child: const Icon(Icons.add),

   ),

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

          ),

        ],

      ),

    );

  }

4 主题文本样式的默认大小改变

final textTheme = Theme.of(context)
.textTheme
.apply(displayColor: Theme.of(context).colorScheme.onSurface);

TextStyle large =textTheme.displayLarge;
TextStyle displayMedium =textTheme.displayMedium;
TextStyle displaySmall =textTheme.displaySmall;

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,

           ),

         ],

       ),

     ),

   );

 }