Flutter--Button按钮学习

作者: 小迷糊_dcee | 来源:发表于2020-12-22 17:15 被阅读0次

一、介绍

在Flutter中有提供很多Button组件

RaisedButton:凸起的按钮，继承MaterialButton

FlatButton:扁平化的按钮，继承MaterialButton

OutlineButton:带边框的按钮，继承MaterialButton

FloatingActionButton:浮动圆形按钮，继承StatelessWidget

IconButton:图标按钮,，承StatelessWidget

DropdownButton:弹出下拉框，继承StatefulWidget

PopupMenuButton:菜单选择框按钮，继承StatefulWidget

TextButton:文本按钮，继承ButtonStyleButton

ElevatedButtont凸起的按钮:继承ButtonStyleButton

OutlinedButton带边框的按钮,继承ButtonStyleButton

Flutter 1.22版本新增了3个按钮，TextButton、OutlinedButton、ElevatedButton，虽然以前的Button没有被废弃，但还是建议使用新的Button。以前的按钮调整为统一的外观比较麻烦，因此以前经常使用自定义的按钮，而新增的按钮解决了此类问题，可以非常方便的设置整体外观

1.22版本前的按钮	主题	1.22版本后的按钮	主题
FlatButton	ButtonTheme	TextButton	TextButtonTheme
OutlineButton	ButtonTheme	OutlinedButton	OutlinedButtonTheme
RaisedButton	ButtonTheme	ElevatedButton	ElevatedButtonTheme

二、RaisedButton

2.1、RaisedButton源码

const RaisedButton({
    Key key,
    @required VoidCallback onPressed,//点击事件监听
    VoidCallback onLongPress,//长按监听
    ValueChanged<bool> onHighlightChanged,//高亮变化监听
    MouseCursor mouseCursor,
    ButtonTextTheme textTheme,//文本主题
    Color textColor,//文本颜色
    Color disabledTextColor,//按钮不可点击时文本颜色
    Color color,//按钮颜色
    Color disabledColor,//按钮不可点击时按钮颜色
    Color focusColor,
    Color hoverColor,
    Color highlightColor,//高亮颜色
    Color splashColor,//水波纹颜色
    Brightness colorBrightness,//按钮文字样式(不设置文字颜色有效)
    double elevation,//阴影高度
    double focusElevation,
    double hoverElevation,
    double highlightElevation,//高亮时阴影高度
    double disabledElevation,//按钮不可点击时阴影高度
    EdgeInsetsGeometry padding,//内边距
    VisualDensity visualDensity,//Material Design中各类组件的视觉密度
    ShapeBorder shape,//设置按钮边框或形状
    Clip clipBehavior = Clip.none,//剪辑
    FocusNode focusNode,
    bool autofocus = false,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,//水波纹持续时间
    Widget child,//子组件
  }) : assert(autofocus != null),
       assert(elevation == null || elevation >= 0.0),
       assert(focusElevation == null || focusElevation >= 0.0),
       assert(hoverElevation == null || hoverElevation >= 0.0),
       assert(highlightElevation == null || highlightElevation >= 0.0),
       assert(disabledElevation == null || disabledElevation >= 0.0),
       assert(clipBehavior != null),
       super(
         key: key,
         onPressed: onPressed,
         onLongPress: onLongPress,
         onHighlightChanged: onHighlightChanged,
         mouseCursor: mouseCursor,
         textTheme: textTheme,
         textColor: textColor,
         disabledTextColor: disabledTextColor,
         color: color,
         disabledColor: disabledColor,
         focusColor: focusColor,
         hoverColor: hoverColor,
         highlightColor: highlightColor,
         splashColor: splashColor,
         colorBrightness: colorBrightness,
         elevation: elevation,
         focusElevation: focusElevation,
         hoverElevation: hoverElevation,
         highlightElevation: highlightElevation,
         disabledElevation: disabledElevation,
         padding: padding,
         visualDensity: visualDensity,
         shape: shape,
         clipBehavior: clipBehavior,
         focusNode: focusNode,
         autofocus: autofocus,
         materialTapTargetSize: materialTapTargetSize,
         animationDuration: animationDuration,
         child: child,
       );

2.2、RaisedButton属性介绍

属性	说明
onPressed	点击监听
onLongPress	长按点击监听
onHighlightChanged	高亮变化监听
textTheme	文字主题,取决于MaterialApp的theme属性 ButtonTextTheme.normal: 文本颜色取决于ThemeData.brightness ButtonTextTheme.accent: 文本颜色取决于ThemeData.accentColor ButtonTextTheme.primary:文本颜色基于ThemeData.primaryColor
textColor	文本颜色
disabledTextColor	按钮不可点击时文本颜色
color	按钮颜色
disabledColor	按钮不可点击时按钮颜色
highlightColor	高亮颜色，即按钮点击时按钮的颜色
splashColor	水波纹颜色
colorBrightness	按钮文字样式(不设置color时有效) Brightness.light黑色 Brightness.dark白色
elevation	阴影高度
highlightElevation	高亮时阴影高度，即点击按钮时阴影高度
disabledElevation	按钮不可点击时，阴影的高度
padding	内间距
visualDensity	Material Design中各类组件的视觉密度
shape	设置按钮边框或形状(具体使用见demo) Border只设置边框 BeveledRectangleBorder尖端斜角 RaisedButton圆形按钮 RoundedRectangleBorder圆角按钮 StadiumBorder半圆角按钮
clipBehavior	剪切内容 Clip.hardEdge剪辑，但不应用抗锯齿 Clip.antiAlias剪辑具有抗锯齿功能 Clip.antiAliasWithSaveLayer在剪辑后立即剪辑具有抗锯齿和saveLayer Clip.none不剪辑
child	子组件

2.3、RaisedButton的demo

return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Button学习"),
          ),
          body: Container(
            padding: EdgeInsets.only(left: 10, top: 0, right: 0, bottom: 0),
            child: Wrap(
              spacing: 15,
              runSpacing: 5,
              children: [
                RaisedButton(
                  onPressed: () {
                    print("普通按钮");
                  },
                  colorBrightness: Brightness.dark,
                  child: Text("普通按钮"),
                ),
                RaisedButton(
                  onPressed: () {
                    print("带颜色按钮");
                  },
                  child: Text("带颜色按钮"),
                  textColor: Colors.yellow,
                  color: Colors.red,
                ),
                RaisedButton(
                  onPressed: null,
                  child: Text("禁用按钮"),
                  disabledTextColor: Colors.white,
                  disabledColor: Colors.blue,
                ),
                RaisedButton(
                  onPressed: () {},
                  child: Text("阴影效果"),
                  elevation: 20,
                  highlightElevation: 10,
                ),
                RaisedButton(
                  onPressed: () {},
                  child: Text("点击变色"),
                  highlightColor: Colors.red,
                ),
                RaisedButton(
                  onPressed: () {},
                  splashColor: Colors.red,
                  child: Text("水波纹效果"),
                ),
                RaisedButton(
                  onPressed: () {},
                  shape: Border.all(
                      color: Colors.red, width: 1, style: BorderStyle.solid),
                  child: Text("设置边框"),
                ),
                RaisedButton(
                  onPressed: () {},
                  shape: BeveledRectangleBorder(
                      side: BorderSide(
                          color: Colors.red,
                          width: 1,
                          style: BorderStyle.solid),
                      borderRadius: BorderRadius.all(Radius.circular(5))),
                  child: Text("尖端斜角"),
                ),
                Container(
                  height: 80,
                  width: 80,
                  child: RaisedButton(
                    onPressed: () {},
                    child: Text("圆形按钮"),
                    shape: CircleBorder(
                        side: BorderSide(
                            color: Colors.red,
                            width: 1,
                            style: BorderStyle.solid)),
                  ),
                ),
                RaisedButton(
                  onPressed: () {},
                  child: Text("圆角按钮"),
                  shape: RoundedRectangleBorder(
                      side: BorderSide(
                          color: Colors.red,
                          width: 1,
                          style: BorderStyle.solid),
                      borderRadius: BorderRadius.circular(10)),
                ),
                RaisedButton(
                  onPressed: () {},
                  child: Text("半圆角按钮"),
                  shape: StadiumBorder(
                    side: BorderSide(
                        color: Colors.red, width: 1, style: BorderStyle.solid),
                  ),
                ),
              ],
            ),
          )),
    );

1111.png

2020.12.22.00.25.29.gif

2020.12.22.00.26.42.gif

三、FlatButton

3.1FlatButton的源码

const FlatButton({
    Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ValueChanged<bool> onHighlightChanged,
    MouseCursor mouseCursor,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    EdgeInsetsGeometry padding,
    VisualDensity visualDensity,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    FocusNode focusNode,
    bool autofocus = false,
    MaterialTapTargetSize materialTapTargetSize,
    @required Widget child,
    double height,
    double minWidth,
  }) : assert(clipBehavior != null),
       assert(autofocus != null),
       super(
         key: key,
         height: height,
         minWidth: minWidth,
         onPressed: onPressed,
         onLongPress: onLongPress,
         onHighlightChanged: onHighlightChanged,
         mouseCursor: mouseCursor,
         textTheme: textTheme,
         textColor: textColor,
         disabledTextColor: disabledTextColor,
         color: color,
         disabledColor: disabledColor,
         focusColor: focusColor,
         hoverColor: hoverColor,
         highlightColor: highlightColor,
         splashColor: splashColor,
         colorBrightness: colorBrightness,
         padding: padding,
         visualDensity: visualDensity,
         shape: shape,
         clipBehavior: clipBehavior,
         focusNode: focusNode,
         autofocus: autofocus,
         materialTapTargetSize: materialTapTargetSize,
         child: child,
      );

3.2、FlatButton的属性介绍，参考RaisedButton属性介绍

四、OutlineButton

4.1、OutlineButton源码

const OutlineButton({
    Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    MouseCursor mouseCursor,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    double highlightElevation,
    this.borderSide,
    this.disabledBorderColor,
    this.highlightedBorderColor,
    EdgeInsetsGeometry padding,
    VisualDensity visualDensity,
    ShapeBorder shape,
    Clip clipBehavior = Clip.none,
    FocusNode focusNode,
    bool autofocus = false,
    MaterialTapTargetSize materialTapTargetSize,
    Widget child,
  }) : assert(highlightElevation == null || highlightElevation >= 0.0),
       assert(clipBehavior != null),
       assert(autofocus != null),
       super(
         key: key,
         onPressed: onPressed,
         onLongPress: onLongPress,
         mouseCursor: mouseCursor,
         textTheme: textTheme,
         textColor: textColor,
         disabledTextColor: disabledTextColor,
         color: color,
         focusColor: focusColor,
         hoverColor: hoverColor,
         highlightColor: highlightColor,
         splashColor: splashColor,
         highlightElevation: highlightElevation,
         padding: padding,
         visualDensity: visualDensity,
         shape: shape,
         clipBehavior: clipBehavior,
         focusNode: focusNode,
         materialTapTargetSize: materialTapTargetSize,
         autofocus: autofocus,
         child: child,
       );

4.2、OutlineButton的属性介绍，参考RaisedButton属性介绍

五、FloatingActionButton

5.1、FloatingActionButton源码

const FloatingActionButton({
    Key key,
    this.child,
    this.tooltip,
    this.foregroundColor,
    this.backgroundColor,
    this.focusColor,
    this.hoverColor,
    this.splashColor,
    this.heroTag = const _DefaultHeroTag(),
    this.elevation,
    this.focusElevation,
    this.hoverElevation,
    this.highlightElevation,
    this.disabledElevation,
    @required this.onPressed,
    this.mouseCursor,
    this.mini = false,
    this.shape,
    this.clipBehavior = Clip.none,
    this.focusNode,
    this.autofocus = false,
    this.materialTapTargetSize,
    this.isExtended = false,
  }) : assert(elevation == null || elevation >= 0.0),
       assert(focusElevation == null || focusElevation >= 0.0),
       assert(hoverElevation == null || hoverElevation >= 0.0),
       assert(highlightElevation == null || highlightElevation >= 0.0),
       assert(disabledElevation == null || disabledElevation >= 0.0),
       assert(mini != null),
       assert(clipBehavior != null),
       assert(isExtended != null),
       assert(autofocus != null),
       _sizeConstraints = mini ? _kMiniSizeConstraints : _kSizeConstraints,
       super(key: key);

5.2、FloatingActionButton属性介绍

属性	说明
foregroundColor	前置色，一般是文字或者图标的颜色
backgroundColor	背景色
mini	是否mini模式

5.3、FloatingActionButton的demo

FloatingActionButton可以单独使用
也可以作为Scaffold的floatingActionButton属性使用，Scaffold的floatingActionButtonLocation属性，可以配置FloatingActionButton的位置

return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Button学习2"),
          ),
          //配合Scaffold使用
          //centerDocked 底部中间
          //endDocked 底部右侧
          //centerFloat 中间偏上
          //endFloat 底部偏上
          //startTop 左侧顶部
          //endTop 右侧顶部
          //......
          floatingActionButtonLocation:FloatingActionButtonLocation.endTop ,
          floatingActionButton:FloatingActionButton(
            onPressed: () {},
            child: Icon(Icons.home),
            backgroundColor: Colors.red,
            foregroundColor: Colors.white,
            mini: true,
          ) ,
          body: Container(
            padding: EdgeInsets.only(left: 10, top: 0, right: 0, bottom: 0),
            child: Wrap(
              spacing: 15,
              runSpacing: 5,
              children: [
                //单独使用
                FloatingActionButton(
                  onPressed: () {},
                  child: Icon(Icons.people),
                  backgroundColor: Colors.red,
                  foregroundColor: Colors.yellow,
                )
              ],
            ),
          )),
    );

22222.png

六、IconButton

6.1、IconButton源码

const IconButton({
    Key key,
    this.iconSize = 24.0,
    this.visualDensity,
    this.padding = const EdgeInsets.all(8.0),
    this.alignment = Alignment.center,
    this.splashRadius,
    @required this.icon,
    this.color,
    this.focusColor,
    this.hoverColor,
    this.highlightColor,
    this.splashColor,
    this.disabledColor,
    @required this.onPressed,
    this.mouseCursor = SystemMouseCursors.click,
    this.focusNode,
    this.autofocus = false,
    this.tooltip,
    this.enableFeedback = true,
    this.constraints,
  }) : assert(iconSize != null),
       assert(padding != null),
       assert(alignment != null),
       assert(splashRadius == null || splashRadius > 0),
       assert(autofocus != null),
       assert(icon != null),
       super(key: key);

6.2、IconButton属性介绍

属性	说明
iconSize	图标大小
splashRadius	点击图标的溅射范围
splashColor	溅射的颜色
icon	图标
tooltip	提示信息，按钮长按可显示,显示1500ms
alignment	对齐方式

其余属性参考RaisedButton属性。

6.3、IconButton的demo

return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Button学习4"),
          ),
          body: Container(
            padding: EdgeInsets.only(left: 10, top: 0, right: 0, bottom: 0),
            alignment: Alignment.center,
            child: IconButton(
              iconSize: 50,
              color: Colors.blue,
              splashRadius: 50,
              splashColor: Colors.red,
              icon: Icon(Icons.home),
              onPressed: () {},
            ),
          )),
    );

1122.gif

七、DropdownButton

7.1、DropdownButton源码

DropdownButton({
    Key key,
    @required this.items,
    this.selectedItemBuilder,
    this.value,
    this.hint,
    this.disabledHint,
    @required this.onChanged,
    this.onTap,
    this.elevation = 8,
    this.style,
    this.underline,
    this.icon,
    this.iconDisabledColor,
    this.iconEnabledColor,
    this.iconSize = 24.0,
    this.isDense = false,
    this.isExpanded = false,
    this.itemHeight = kMinInteractiveDimension,
    this.focusColor,
    this.focusNode,
    this.autofocus = false,
    this.dropdownColor,
    // When adding new arguments, consider adding similar arguments to
    // DropdownButtonFormField.
  }) : assert(items == null || items.isEmpty || value == null ||
              items.where((DropdownMenuItem<T> item) {
                return item.value == value;
              }).length == 1,
                "There should be exactly one item with [DropdownButton]'s value: "
                '$value. \n'
                'Either zero or 2 or more [DropdownMenuItem]s were detected '
                'with the same value',
              ),
       assert(elevation != null),
       assert(iconSize != null),
       assert(isDense != null),
       assert(isExpanded != null),
       assert(autofocus != null),
       assert(itemHeight == null || itemHeight >=  kMinInteractiveDimension),
       super(key: key);

7.2、DropdownButton的属性介绍

属性	说明
items	下拉菜单项
value	选中的值
hint	value为空时的提示语
disabledHint	下拉按钮不能用时的提示语
onChanged	下拉按钮改变值的事件监听
onTap	点击按钮的事件监听
elevation	阴影高度
style	文本样式
underline	下划线
icon	按钮的图标，默认Icons.arrow_drop_down
iconDisabledColor	下拉按钮不可点击时，图标的颜色
iconEnabledColor	下拉按钮可点击时，图标的颜色
iconSize	图标的大小
isDense	默认为false该按钮的高度与其菜单项的高度相同，如果为true按钮高度是item高度的一半
isExpanded	默认false按钮的内部宽度是其内容的最小尺寸 true，则内部宽度将被展开来填充周围的容器。
itemHeight
dropdownColor	下拉菜单的背景颜色

7.3、DropdownButton的demo

class ButtonFul extends StatefulWidget {
  ButtonFul({Key key}) : super(key: key);

  _ButtonFulState createState() => _ButtonFulState();
}

class _ButtonFulState extends State<ButtonFul> {
  var buttonItems = ['item1', 'item2', 'item3', 'item4'];
  String _itemValue;

  List<DropdownMenuItem> _getDropdownItem() {
    return buttonItems.map((e) {
      return DropdownMenuItem(
        child: Text(e),
        value: e,
      );
    }).toList();
  }

  @override
  void initState() {
    super.initState();
    _itemValue = buttonItems[0];
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("StatefulWidget模板"),
          ),
          body: Container(
            alignment: Alignment.center,
            padding: EdgeInsets.all(10),
            child: DropdownButton(
              onChanged: (value) {
                setState(() {
                  print("ysl--onChanged");
                  _itemValue = value;
                });
              },
              onTap: (){
                print("ysl--onTap");
              },
              items: _getDropdownItem(),
              value: _itemValue,
              hint: Text("请选择"),
              disabledHint: Text("按钮不可点击"),
              elevation: 10,
              underline: Container(color: Colors.red,height: 1,),
              iconSize: 30,
              dropdownColor: Colors.blue,
            ),
          )),
    );
  }
}

2020.12.22.15.15.24.gif

八、PopupMenuButton

8.1、PopupMenuButton的源码

const PopupMenuButton({
    Key key,
    @required this.itemBuilder,
    this.initialValue,
    this.onSelected,
    this.onCanceled,
    this.tooltip,
    this.elevation,
    this.padding = const EdgeInsets.all(8.0),
    this.child,
    this.icon,
    this.offset = Offset.zero,
    this.enabled = true,
    this.shape,
    this.color,
    this.captureInheritedThemes = true,
  }) : assert(itemBuilder != null),
       assert(offset != null),
       assert(enabled != null),
       assert(captureInheritedThemes != null),
       assert(!(child != null && icon != null),
           'You can only pass [child] or [icon], not both.'),
       super(key: key);

8.2、PopupMenuButton的属性介绍

属性	说明
itemBuilder	弹出菜单项的生成器，该方法返回List<PopupMenuItem>
initialValue	设置弹出菜单默认选中项的值
onSelected	弹出菜单被选择事件监听
onCanceled	没用任何菜单被选择时触发，即点击空白处触发
tooltip	提示信息，按钮长按可显示
elevation	阴影高度
padding	内间距
child	子组件
icon	图标
offset	设置下拉菜单偏移量
enabled	是否可使用
shape	参考RaisedButton的shape属性
color	参考RaisedButton的color属性

8.3、PopupMenuButton的demo

class ButtonFul extends StatefulWidget {
  ButtonFul({Key key}) : super(key: key);

  _ButtonFulState createState() => _ButtonFulState();
}

class _ButtonFulState extends State<ButtonFul> {
  final popupMenuItems = ['menu1', 'menu2', 'menu3', 'menu4'];

  List<PopupMenuItem> _getPopupMenu() {
    return popupMenuItems.map((e) {
      return PopupMenuItem(
        child: Text(e),
        value: e,
      );
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("StatefulWidget模板"),
            actions: [],
          ),
          body: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.all(10),
              child: PopupMenuButton(
                itemBuilder: (context) {
                  return _getPopupMenu();
                },
                icon: Icon(Icons.add_circle),
                initialValue: popupMenuItems[0],
                elevation: 20,
                onSelected: (item) {
                  print("ysl--选择条目");

                },
                tooltip: "tooltip",
                onCanceled: () {
                  print("ysl--点击空白区域");
                },
                shape: RoundedRectangleBorder(
                    side: BorderSide(
                        color: Colors.red, width: 1, style: BorderStyle.solid),
                    borderRadius: BorderRadius.circular(10)),
                offset: Offset(10, 20),
                color: Colors.yellow,
              ))),
    );
  }
}

2020.12.22.16.08.55.gif

九、TextButton文本按钮

9.1、TextButton源码

const TextButton({
    Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ButtonStyle style,
    FocusNode focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    @required Widget child,
  }) : super(
    key: key,
    onPressed: onPressed,
    onLongPress: onLongPress,
    style: style,
    focusNode: focusNode,
    autofocus: autofocus,
    clipBehavior: clipBehavior,
    child: child,
  );

9.2、TextButton属性介绍

属性	说明
onPressed	点击监听
onLongPress	长按监听
style	ButtonStyle样式，详情见下文
clipBehavior	参考RaisedButton的clipBehavior属性
child	子组件

9.3、ButtonStyle的源码及属性介绍

const ButtonStyle({
    this.textStyle,
    this.backgroundColor,
    this.foregroundColor,
    this.overlayColor,
    this.shadowColor,
    this.elevation,
    this.padding,
    this.minimumSize,
    this.side,
    this.shape,
    this.mouseCursor,
    this.visualDensity,
    this.tapTargetSize,
    this.animationDuration,
    this.enableFeedback,
  });

属性	说明
textStyle	文本样式,设置文字的大小和粗细
backgroundColor	背景色
foregroundColor	前景色，即文本的颜色和图标的颜色
overlayColor	水波纹颜色
shadowColor	阴影颜色
elevation	阴影高度
padding	内间距
minimumSize	设置按钮的大小
side	边框设置
shape	外边框样式会覆盖side,参考RaisedButton的shape属性，使用方法有点不同，具体使用见代码
visualDensity	参考RaisedButton的visualDensity属性
tapTargetSize	配置按钮被按下区域的最小尺寸
animationDuration	动画变化的持续时间
enableFeedback	检测到的手势是否应该提供听觉和/或触觉反馈

9.4、TextButton的demo

home: Scaffold(
          appBar: AppBar(
            title: Text("TextButton学习"),
            actions: [],
          ),
          body: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.all(10),
              child: TextButton(
                child: Text("文本按钮"),
                onPressed: () {
                  print("onPressed");
                },
                onLongPress: () {
                  print("onLongPress");
                },
                style: ButtonStyle(
                  //设置颜色无效
                  textStyle: MaterialStateProperty.all(
                      TextStyle(fontSize: 18, color: Colors.red)),

                  foregroundColor: MaterialStateProperty.resolveWith(
                    (states) {
                      if (states.contains(MaterialState.pressed)) {
                        ////按下时的颜色
                        return Colors.red;
                      }
                      //默认状态使用灰色
                      return Colors.black;
                    },
                  ),

                  backgroundColor: MaterialStateProperty.resolveWith((states) {
                    //设置按下时的背景颜色
                    if (states.contains(MaterialState.pressed)) {
                      return Colors.yellow;
                    }
                    //默认不使用背景颜色
                    return null;
                  }),
                //设置水波纹颜色
                  overlayColor: MaterialStateProperty.all(Colors.purpleAccent),
                  //设置按钮大小
                  minimumSize: MaterialStateProperty.all(Size(150, 80)),
                  //设置边框
                  side: MaterialStateProperty.all(
                      BorderSide(color: Colors.red, width: 1)),
                  //设置按钮形状
                  shape: MaterialStateProperty.all(StadiumBorder(
                    side: BorderSide(
                        color: Colors.red, width: 1, style: BorderStyle.solid),
                  )),
                ),
              ))),

2020.12.22.16.57.09.gif

十、ElevatedButton

10.1、ElevatedButton的源码

const ElevatedButton({
    Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ButtonStyle style,
    FocusNode focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    @required Widget child,
  }) : super(
    key: key,
    onPressed: onPressed,
    onLongPress: onLongPress,
    style: style,
    focusNode: focusNode,
    autofocus: autofocus,
    clipBehavior: clipBehavior,
    child: child,
  );

10.1、ElevatedButton的属性介绍，参考TextButton的属性介绍

十一、OutlinedButton

11.1、OutlinedButton的源码

const OutlinedButton({
    Key key,
    @required VoidCallback onPressed,
    VoidCallback onLongPress,
    ButtonStyle style,
    FocusNode focusNode,
    bool autofocus = false,
    Clip clipBehavior = Clip.none,
    @required Widget child,
  }) : super(
    key: key,
    onPressed: onPressed,
    onLongPress: onLongPress,
    style: style,
    focusNode: focusNode,
    autofocus: autofocus,
    clipBehavior: clipBehavior,
    child: child,
  );