Flutter MaterialButton 按钮详细概述

题记 —— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

目前在西瓜视频上免费刊登 Flutter 系列教程，每日更新，欢迎关注接收提醒

【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用

MaterialButton 是Material 风格按钮，小编也是代码控，直接来一个全属性配置说明代码如下：

MaterialButton buildMaterialButton() {
  return MaterialButton(
      ///按钮的背景
      color: Colors.blue,

      child: Text("按钮"),
      ///点击回调函数
      onPressed: (){
        print("按钮点击");
      },
      ///按钮按下时回调 value = true
      ///按钮抬起时回调 value = false
      ///要先于 onPressed
      onHighlightChanged: (value){
        print("按钮点击 Hight $value");
      },
      ///定义按钮的基色，以及按钮的最小尺寸
      ///ButtonTextTheme.accent 按钮显示的文本 ThemeData.accentColor(MaterialApp组件中的theme属性配制的)
      ///ButtonTextTheme. normal 按钮显示的文本 黑色或者白色 具体取决于ThemeData.brightness Brightness.dark
      ///ButtonTextTheme.primary 按钮的显示的文本 ThemeData.primaryColr
      textTheme: ButtonTextTheme.primary,
      ///配制按钮上文本的颜色
      textColor: Colors.deepOrange,
      ///未设置点击时的背景颜色
      disabledColor:Colors.yellow ,
      ///按钮点击下的颜色
      highlightColor:Colors.deepPurple,
      ///水波方的颜色
      splashColor: Colors.green,
      ///按钮的阴影
      elevation: 10,
      ///按钮按下时的阴影高度
      highlightElevation: 20,
      ///未设置点击时的阴影高度
      disabledElevation: 5.0,
      ///用来设置按钮的边框的样式
      /// Border.all(color: Colors.deepOrange,width: 2.5,style:  BorderStyle.solid) 四个边框
      /// Border(bottom: BorderSide(color: Colors.deepOrange,width: 2.5,style:  BorderStyle.solid)) 可以分别设置边框
      /// 用来设置底部边框的
      /// UnderlineInputBorder(borderSide: BorderSide(color: Colors.deepOrange,width: 2.5,style:  BorderStyle.solid),borderRadius: BorderRadius.circular(10))
      /// 用来设置圆角矩形边框
      ///   RoundedRectangleBorder(side: BorderSide.none,borderRadius: BorderRadius.all(Radius.circular(20)))
      ///   用来设置圆形边框
      ///   CircleBorder(side: BorderSide(width: 2,color:Colors.red )),
      ///   椭圆形边框 StadiumBorder(side: BorderSide(width: 2,color: Colors.red))
      ///   设置 多边形 BeveledRectangleBorder(side: BorderSide(width: 2,color: Colors.red),borderRadius: BorderRadius.all(Radius.circular(20)))
      ///
      shape: Border.all(color: Colors.deepOrange,width: 2.5,style:  BorderStyle.solid),
      height: 44.0,
      minWidth: 140,
    );
}

配置的属性比较全，运行出的效果如下图所示，大家可以根据实际项目开发灵活配置使用。