作者 | 弗拉德
起源 | 弗拉德（公众号：fulade_me)
Material 格调中罕用的按钮有三种RaiseButton、FlatButton、OutlineButton。
这三种按钮都是继承了MaterialButton，而MaterialButton又继承自StatelessWidget。
RaiseButton：带有暗影成果的按钮，默认带有灰色背景，点击上来会有点击成果和暗影。
FlatButton: 扁平格调按钮，点击上来会有背景色彩。
OutlineButton: 带有边框的按钮，且边框会在点击时扭转色彩。
1. RaisedButton
咱们先来看RaisedButton的构造方法
const RaisedButton({ Key key, /// 点击后的回调办法 @required VoidCallback onPressed, /// 长按后的回调办法 VoidCallback onLongPress, /// 高亮时候的回调办法 ValueChanged<bool> onHighlightChanged, /// 鼠标指针的光标进入或悬停在此按钮(这个用于Web端或PC端) MouseCursor mouseCursor, /// 文本的主题，这个跟MaterialApp的属性theme无关 ButtonTextTheme textTheme, /// 文本色彩 Color textColor, /// 不可点击时的文本色彩 Color disabledTextColor, /// 背景色彩 Color color, /// 可点击时的背景色彩 Color disabledColor, /// 获取焦点时的色彩(用于Web端或PC端) Color focusColor, /// 指鼠标悬停时的色彩(用于Web端或PC端) Color hoverColor, /// 高亮时的色彩 Color highlightColor, /// 水波纹色彩，按下松开会有水波纹成果 Color splashColor, /// 按钮主题色彩，默认浅色 Brightness colorBrightness, /// 默认时的 暗影大小 double elevation, /// 选中时的 暗影大小 double focusElevation, /// 指鼠标悬停时的暗影大小 double hoverElevation, /// 高亮时的暗影大小 double highlightElevation, /// 不可选中时的暗影大小 double disabledElevation, /// 内边距 跟布局无关 EdgeInsetsGeometry padding, VisualDensity visualDensity, /// 设置按钮的形态 ShapeBorder shape, /// 切边的款式 Clip clipBehavior = Clip.none, FocusNode focusNode, bool autofocus = false, MaterialTapTargetSize materialTapTargetSize, /// 动画的工夫 Duration animationDuration, /// 子控件 Widget child, }) 1.1 一个最简略的RaisedButton
RaisedButton( child: Text("RaisedButton"), onPressed: () {},);成果:
1.2 不可点击状态
RaisedButton( child: Text("不设置onPressed"), disabledColor: Colors.blue, disabledTextColor: Colors.red,);如果不设置onPressed参数，默认是不可点击的，当然咱们仍然能够设置不可点击时候的文字色彩和背景色彩。须要留神onPressed是@required参数，不倡议不传此参数。
1.3 文本色彩
RaisedButton( child: Text("textColor红色"), textColor: Colors.red, onPressed: () {},);textColor能够设置文字的色彩。
1.4 设置形态
RaisedButton( onPressed: () {}, child: Text("椭圆形"), shape: StadiumBorder(),);通过shape参数能够设置按钮的形态，常见的形态有RoundedRectangleBorder矩形、CircleBorder圆形、StadiumBorder椭圆形、BeveledRectangleBorder八边形。
1.5 背景色彩
RaisedButton( child: Text("背景色彩"), color: Colors.red, onPressed: () {},);通过传入color能够设置按钮的背景色彩。
1.6 高亮色彩
RaisedButton( onPressed: () {}, child: Text("高亮红色"), highlightColor: Colors.red,);传入highlightColor参数来设置选中时候的色彩。
1.7 水波纹红色
RaisedButton( onPressed: () {}, child: Text("水波纹红色"), splashColor: Colors.red,);splashColor能够帮忙咱们设置点击后的水波纹色彩。
1.8 高亮回调
RaisedButton( child: Text("高亮变动回调"), onPressed: () {}, onHighlightChanged: (value) { print("高亮切换"); },);onHighlightChanged能够接管一个回调办法，当按钮被按下并高亮的时候会回调该办法。
1.9 长按回调
RaisedButton( child: Text("长按回调"), onPressed: () {}, onLongPress: () { print("长按回调"); },);onLongPress能够接管一个长按回调办法，当按钮被长按的时候会回调该办法。
1.10 设置暗影的大小
RaisedButton( child: Text("暗影设置20"), onPressed: () {}, elevation: 20.0,);elevation参数能够设置暗影的大小，默认的暗影比拟小，能够通过此参数设置更大的暗影大小。
想体验以上代码运行成果，能够到我的Github仓库我的项目flutter_app->lib->routes->flat_button_page.dart，能够下载下来运行并体验。
2. FlatButton
FlatButton的结构函数参数跟RaisedButton参数基本一致，设置形式也是一样的。
const FlatButton({ Key key, /// 点击后的回调 @required VoidCallback onPressed, /// 长按后的回调 VoidCallback onLongPress, /// 点击 高亮后的回调 ValueChanged<bool> onHighlightChanged, /// 鼠标指针的光标进入或悬停在此按钮(这个用于Web端或PC端) MouseCursor mouseCursor, /// 文本的主题，这个跟MaterialApp的属性theme无关 ButtonTextTheme textTheme, /// 文字色彩 Color textColor, /// 不可点击时的文本色彩 Color disabledTextColor, /// 背景色彩 Color color, /// 不可点击时的背景色彩 Color disabledColor, /// 获取焦点时的色彩(用于Web端或PC端) Color focusColor, /// 指鼠标悬停时的色彩(用于Web端或PC端) 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, })2.1 一个最简略的FlatButton
FlatButton( child: Text("FlatButton"), onPressed: () {},);
咱们能够看到绝对比于RaisedButton，FlatButton默认扁平化格调的。
2.2 设置形态
FlatButton( onPressed: () {}, child: Text("椭圆形"), shape: StadiumBorder(),);通过传入shape参数可设置FlatButton的形态。须要留神的是：设置好的形态，只有当点击上来的时候才能够看到成果。
其余的 不可点击状态、文本色彩、背景色彩、高亮色彩、水波纹红色、高亮回调、长按回调等状态的设置代码跟RaisedButton的设置形式一样。
想体验FlatButton的运行成果，能够到我的Github仓库我的项目flutter_app->lib->routes->flat_button_page.dart，能够下载下来运行并体验。
3. OutlineButton
咱们来看OutlineButton的构造函数
const OutlineButton({ Key key, /// 点击后的回调 @required VoidCallback onPressed, /// 长按后的回调 VoidCallback onLongPress, /// 鼠标指针的光标进入或悬停在此按钮(这个用于Web端或PC端) MouseCursor mouseCursor, /// 文本的主题，这个跟MaterialApp的属性theme无关 ButtonTextTheme textTheme, /// 文字色彩 Color textColor, /// 不可点击时的文本色彩 Color disabledTextColor, /// 背景色彩 Color color, /// 获取焦点时的色彩(用于Web端或PC端) Color focusColor, /// 指鼠标悬停时的色彩(用于Web端或PC端) 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, /// 子控件 Widget child, })3.1 简略的 OutlineButton
OutlineButton( onPressed: () {}, child: Text("OutlineButton"),);它的边框默认是灰色的，点击选中的时候会变为蓝色。
3.2 Border的款式
OutlineButton( child: Text("Border色彩"), borderSide: BorderSide(color: Colors.red, width: 2), highlightColor: Colors.yellow, highlightedBorderColor: Colors.green, onPressed: () {},);borderSide能够接管一个BorderSide的对象，该对象能够设置色彩和宽度，同样咱们也能够通过设置highlightColor和highlightedBorderColor来设置选中的背景色彩和选中的边框色彩。
其余的 不可点击状态、文本色彩、高亮色彩、水波纹红色、高亮回调、长按回调等状态的设置代码跟RaisedButton的设置形式一样。
想体验FlatButton的运行成果，能够到我的Github仓库我的项目flutter_app->lib->routes->outline_button_page.dart，能够下载下来运行并体验。
4. IconButton
4.1 简略的IconButton
IconButton( icon: Icon(Icons.local_taxi), onPressed: () {},);IconButton能够接管一个Icon类的的参数，Flutter自带了很多Icon详情可见这里
4.1 带有选中提醒的IconButton
IconButton( icon: Icon(Icons.local_cafe), tooltip: "Cafe Button", color: Colors.red, onPressed: () {},);通过设置tooltip属性，能够设置按钮按下的弹出提醒文字。咱们这里设置了Cafe Button的文字。
4.2 自定义图片的IconButton
IconButton( icon: Image.asset("images/flutter_icon_100.png"), onPressed: () {},);咱们同样能够提供一个Image类型的Icon，这样就满足咱们设置不同的图片按钮。
如下图：
想体验IconButton的运行成果，能够到我的Github仓库我的项目flutter_app->lib->routes->icon_button_page.dart，能够下载下来运行并体验。
以上就是Material格调的按钮以及详解，如果你想理解Cupertino格调按钮，能够点击这里。
咱们日常开发中大多数状况下都会应用Material格调的款式。