flutter Material3风格Button、AppBar，Material3与Material2简单对比

 Material Design是由 Google 推出的全新的设计语言，谷歌表示，这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。Material3 又叫 MaterialYou ， 是谷歌在 Android 12 时提出的全新 UI 设计规范，现在 Flutter 3.0 里你可以通过 useMaterial3: true 打开配置支持。这次就在学习Button组件的同时对比一下flutter下的MD2和MD3的差异。

Material Design 3

 由于Flutter是跨平台的，所以有适用于Android和iOS的两种风格的组件。一套是Google极力推崇的Material，一套是iOS的Cupertino风格的组件。无论哪种风格，都是通用的。Flutter 3 支持新一代 Material Design，即 Material Design 3。Flutter 3 提供 Material 3 的可选支持，包括动态颜色、最新颜色系统和字体等 Material You 功能，还包含许多组件的更新，以及在 Android 12 中引入的新触摸波纹设计和拉伸滚动等全新视觉效果。我们欢迎大家尝试 Material 3 的功能特性。

 flutter开启后受到影响的有以下这些,我们将逐一实现并查看区别：

Affected widgets
Common buttons: TextButton, OutlinedButton, ElevatedButton
FAB: FloatingActionButton
Extended FAB: FloatingActionButton.extended
Cards: Card
Chips:
    ActionChip (used for Assist and Suggestion chips),
    FilterChip, ChoiceChip (used for single selection filter chips),
    InputChip
Dialogs: Dialog, AlertDialog
Lists: ListTile
Navigation bar: NavigationBar (new, replacing BottomNavigationBar)
Navigation rail: NavigationRail
Top app bar: AppBar

Button

 常用的Button组件如下所示:

MaterialButton: 默认按钮，扁平，背景透明，按下后，会有背景色。
RaisedButton:  已经弃用
FlatButton： 已经弃用
IconButton:  图标按钮，只能是纯图标，按钮不可展示文案。
FloatingActionButton:  浮动按钮，可显示文字和图标。
OutlineButton:  外边框按钮，可设置按钮外边框颜色。
ButtonBar:  水平布局的按钮容器，可放置多个Button或Text。
TextButton：  文字按钮，按钮中带文字
TextButton.icon():  带图标文字混合按钮，它可以轻松创建带图标和文字的按钮。

 可以通过ButtonStyle对Button组件进行样式设置:

const ButtonStyle({
    this.textStyle, // 文本的样式 但是对于颜色是不起作用的
    this.backgroundColor, // 按钮背景颜色
    this.foregroundColor, // 文本及图标颜色
    this.overlayColor, // 高亮色，按钮处于focused, hovered, or pressed时的颜色
    this.shadowColor, // 阴影颜色
    this.elevation, 
    this.padding, // 按钮内边距
    this.minimumSize, // 按钮最小值
    this.fixedSize, // 按钮大小
    this.maximumSize, // 按钮最大值
    this.side, // 边框
    this.shape, // 形状-可设置圆角弧度
    this.mouseCursor, // 鼠标指针进入或悬停时的光标
    this.visualDensity, // 按钮的文字可显示区域的大小
    this.tapTargetSize, // 按钮点击区域大小
    this.animationDuration, // 动画的持续时间
    this.enableFeedback, // 按钮点击时是否提示音
    this.alignment, // 按钮子对象的对齐方式
    this.splashFactory, // 自定义动画的
  });

TextButton

 TextButton是最简单的文字按钮，按钮中带文字，下边实现一个带边框的文字按钮，点击后背景颜色会变成青色：

     TextButton(
              onPressed: () {},
              //设置按钮是否自动获取焦点
              autofocus: true,
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.resolveWith((states) {
                  //设置按下时的背景颜色
                  if (states.contains(MaterialState.pressed)) {
                    return const Color.fromARGB(255, 150, 236, 215);
                  }
                  //默认不使用背景颜色
                  return null;
                }),
                side: MaterialStateProperty.all(
                    BorderSide(color: Colors.grey, width: 1)),
              ),
              child: const Text("Text Button"))

 MD2与MD3的对比如图所示，MD3比较圆润一点：

OutlinedButton

 OutlinedButton外边框按钮，可设置按钮外边框颜色,默认情况下，MD3的OutlinedButton是没有边框的，TextButton也可以设置边框，不知道这两个按钮有什么区别。。

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

ElevatedButton

 ElevatedButton效果如下所示，我认为MD3的默认效果更好看点：

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

FloatingActionButton

 浮动按钮，可显示文字和图标,MD3默认不是圆形的，有点棱角。

FloatingActionButton(
      onPressed: (){},
      //child: const Text("FloatingActionButton"),
        child:const Icon(Icons.icecream),
    );

 我们可以使用FloatingActionButton.extended自适应样式来实现文字和图标同时显示,设置label添加文字：

 FloatingActionButton.extended(
      onPressed: () {},
      icon: const Icon(Icons.ac_unit),
      label: const Text("FloatingActionButtonTestExtended"),
    );

 可以通过设置foregroundColor、backgroundColor修改文字和背景颜色，设置tooltip实现鼠标放上去有文字提示,设置shape实现边框样式修改。

FloatingActionButton.extended(
      onPressed: () {},
      icon: const Icon(Icons.ac_unit),
      label: const Text("FloatingActionButtonTestExtended"),
        tooltip: "FloatingActionButtonTestExtended",
      foregroundColor: Colors.black,
      backgroundColor: const Color.fromARGB(255, 234, 239, 240),
       shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
        side: const BorderSide(
          width: 2,
          color: Color.fromARGB(255, 167, 207, 240),
        ),
      ),
    );

MaterialButton

 MaterialButton 是Material 风格按钮,可以设置很多属性，比如背景颜色、阴影大小及颜色、点击颜色变化等属性，显示内容可以放很多东西，比如文字和图标，只要在child里面放一个Column，然后再放你想放的组件就可以：

MaterialButton(
      color: Color.fromARGB(255, 241, 207, 219),
      onPressed: () {},

      ///配制按钮上文本或者图标的颜色
      textColor: Colors.black,

      ///按钮点击下的颜色
      highlightColor: Colors.yellow,

      ///水波方的颜色
      splashColor: Colors.green,

      ///按钮的阴影
      elevation: 10,

      ///按钮按下时的阴影高度
      highlightElevation: 20,

      ///未设置点击时的阴影高度
      disabledElevation: 5.0,
      child: Column(
        children: const [Icon(Icons.access_alarm), Text("MaterialButton")],
      ),
    );

IconButton

 IconButton是带图标的按钮，设置iconSize改变图标大小，设置alignment改变对齐位置，splashColor可以设置水波纹颜色，但是在MD3下边不知道为什么不好使，设置splashRadius改变按下按钮时的闪光半径，tooltip设置悬停时提示信息。

 IconButton(
      onPressed: () {},
      iconSize: 24.0, //图标大小
      alignment: Alignment.center, //图标位置
      color: Colors.pink, //颜色
      padding: const EdgeInsets.all(20), //内边距
      splashColor: Colors.yellow, //水波纹颜色
      tooltip: "IconButtonTest",
      splashRadius:
          20, //当用户按下 IconButton 时 IconButton 周围的闪光半径。它的默认值是 defaultSplashRadius (35)
      icon: const Icon(Icons.window),
    );

Button.icon()

 带图标文字混合按钮，TextButton有一个icon 构造函数，它可以轻松创建带图标和文字的按钮，感觉与IconButton很相似，但是样式的设置方式不太一样。

 TextButton.icon(
        onPressed: () {},
        icon: const Icon(Icons.window),
        label: const Text("FloatingActionButtonTestExtended"),
      ),

总结

 这次将MD3和Button的学习结合在一起，也对比了MD2与MD3在按钮样式的差异。后期如果用到哪种按钮可以拿来就用。随着flutter的更新，有很对按钮组件都已经弃用，比如FlatButton，本来想实现FlatButton按钮，但是一直报错，后来我找了半天教程才发现已经弃用了，Flutter经过多次更新后变化还是有的，后边要稍微注意一下了。