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

4,368 阅读1分钟

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

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

1 配置启用 Material3

查看当前 Flutter的版本

image.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"),
 ),

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

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

image.png

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;

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

image.png