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

不念不忘少年蓝@ 2023-10-07 20:46 32阅读 0赞

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

**重要消息**

*  [flutter从入门 到精通 系列文章][flutter_ _]

--------------------

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

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

--------------------

##### 1 配置启用 Material3 #####

查看当前 Flutter的版本  
![在这里插入图片描述][0590e6bbc6f841eca7946bf18b517b0b.png_pic_center]

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

![在这里插入图片描述][91713713878a4e0ab71a2a693f2d8fc8.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'),
       ),

![在这里插入图片描述][d18671c089014ed6848f4ed25af0f289.png]

###### 2.3 OutlinedButton ######

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

![在这里插入图片描述][9d136761a8904dbebbdff418d11ba05a.png]

###### 2.4 FloatingActionButton.small ######

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

![在这里插入图片描述][4209da838d5a48f8a39d47818f3ecbc6.png]

###### 2.5 FloatingActionButton ######

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

![在这里插入图片描述][1e34ece981d4408ca6e57be10df380d5.png]

###### 2.6 FloatingActionButton.extended ######

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

![在这里插入图片描述][8a2890fc910a435081bdf4af389ff74f.png]

###### 2.7 FloatingActionButton.large ######

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

![在这里插入图片描述][357f07f523114539aaf3506b95c2fc5e.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(),
              ),
            ],
          ),
        );
      }

![在这里插入图片描述][67244455ef0a4fdeaa1d5fc8fe7fcda5.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!),
            ],
          ),
        );
      }
    }

![在这里插入图片描述][051f77d0aa77450884ae6e1d8aafa2ad.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,
               ),
             ],
           ),
         ),
       );
     }

![在这里插入图片描述][d9c6f4a2d7e9423bbd37e5f64a2607d6.png]

--------------------

完毕

[flutter_ _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[0590e6bbc6f841eca7946bf18b517b0b.png_pic_center]: https://img-blog.csdnimg.cn/0590e6bbc6f841eca7946bf18b517b0b.png#pic_center
[91713713878a4e0ab71a2a693f2d8fc8.png]: https://img-blog.csdnimg.cn/91713713878a4e0ab71a2a693f2d8fc8.png
[d18671c089014ed6848f4ed25af0f289.png]: https://img-blog.csdnimg.cn/d18671c089014ed6848f4ed25af0f289.png
[9d136761a8904dbebbdff418d11ba05a.png]: https://img-blog.csdnimg.cn/9d136761a8904dbebbdff418d11ba05a.png
[4209da838d5a48f8a39d47818f3ecbc6.png]: https://img-blog.csdnimg.cn/4209da838d5a48f8a39d47818f3ecbc6.png
[1e34ece981d4408ca6e57be10df380d5.png]: https://img-blog.csdnimg.cn/1e34ece981d4408ca6e57be10df380d5.png
[8a2890fc910a435081bdf4af389ff74f.png]: https://img-blog.csdnimg.cn/8a2890fc910a435081bdf4af389ff74f.png
[357f07f523114539aaf3506b95c2fc5e.png]: https://img-blog.csdnimg.cn/357f07f523114539aaf3506b95c2fc5e.png
[67244455ef0a4fdeaa1d5fc8fe7fcda5.png]: https://img-blog.csdnimg.cn/67244455ef0a4fdeaa1d5fc8fe7fcda5.png
[051f77d0aa77450884ae6e1d8aafa2ad.png]: https://img-blog.csdnimg.cn/051f77d0aa77450884ae6e1d8aafa2ad.png
[d9c6f4a2d7e9423bbd37e5f64a2607d6.png]: https://img-blog.csdnimg.cn/d9c6f4a2d7e9423bbd37e5f64a2607d6.png