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

Posted 2022-11-27 早起的年轻人

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

重要消息

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

2 按钮样式的改变

按钮默认的圆角大小改变

2.1 ElevatedButton

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

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

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 主题文本样式的默认大小改变

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

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

---

完毕