IconButton
如果即是一个图标又想点击，那么就用这个
IconButton(
icon: Icon(Icons.close),
onPressed: (){
//
}
)
普通按钮FlatButton
这种按钮没有深度，所以没有阴影，一个例子
FlatButton(
child: Text("去补测"),
onPressed: (){
},
)
这是一个普通的按钮，无背景的。如果想添加背景，可以添加color: Colors.XXX, 如下
FlatButton(
color: Colors.blue,
textColor: Colors.white,
child: Text("去补测"),
onPressed: (){
},
)
这样就是一个蓝色背景白色字体的按钮。
注意如果要显示背景，必须设置onPressed，否则即使设置了color依然没有背景色显示
但是这个背景并不是圆角的（其实有一点点圆角），如果想实现圆角，则需要添加shape，如下：
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
color: Colors.blue,
textColor: Colors.white,
child: Text("去补测"),
onPressed: (){
},
)
这样就添加了大小为10的圆角。但是如果我们想实现边框背景，即中间透明四周有边框的，需要修改shape如下：
FlatButton(
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.blue,
width: 1,
),
borderRadius: BorderRadius.circular(10),
),
color: Colors.transparent,
textColor: Colors.blue,
child: Text("去补测"),
onPressed: (){
},
)
注意color改成透明的了，这样就实现了边框背景，且带有圆角。
其他button
其他如MaterialButton等，有的是有阴影的，不过使用方式大致一样。
去除默认间距
在flutter中使用button组件，默认四周是有间距的，如果想去掉这个间距，直接设置padding是不够的，比如
FlatButton(
padding: EdgeInsets.all(0),
child: Text("1"),
onPressed: (){
...
},
),
设置完会发现没有效果，文字四周还是有间距。这是因为全局默样式ButtonTheme导致的，影响这个间距的因素有两个。
第一个就是宽高，因为button的高度可以通过height设置，但是没有width属性，所以宽度无法设置固定。所以这里的关键就是minWidth，在ButtonTheme中的minWidth默认是88，如下
const ButtonThemeData({
this.textTheme = ButtonTextTheme.normal,
this.minWidth = 88.0,
this.height = 36.0,
EdgeInsetsGeometry padding,
ShapeBorder shape,
this.layoutBehavior = ButtonBarLayoutBehavior.padded,
this.alignedDropdown = false,
Color buttonColor,
Color disabledColor,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
this.colorScheme,
MaterialTapTargetSize materialTapTargetSize,
})
这个就导致了我们无论如何设置padding，宽度都不会小于88。
要改变这个值可以不用修改样式，直接通过button的minWidth属性即可，如：
FlatButton(
minWidth: 0,
padding: EdgeInsets.all(0),
child: Text("1"),
onPressed: (){
...
},
),
修改了minWidth后再运行看效果，发现按钮宽度减少了，但是两边还有间距。这就是第二个影响因素：padding。
我们不是已经将padding设置为0了么？看一下FlatButton源码：
@override
Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
final ButtonThemeData buttonTheme = ButtonTheme.of(context);
return RawMaterialButton(
onPressed: onPressed,
onLongPress: onLongPress,
onHighlightChanged: onHighlightChanged,
mouseCursor: mouseCursor,
fillColor: buttonTheme.getFillColor(this),
textStyle: theme.textTheme.button.copyWith(color: buttonTheme.getTextColor(this)),
focusColor: buttonTheme.getFocusColor(this),
hoverColor: buttonTheme.getHoverColor(this),
highlightColor: buttonTheme.getHighlightColor(this),
splashColor: buttonTheme.getSplashColor(this),
elevation: buttonTheme.getElevation(this),
focusElevation: buttonTheme.getFocusElevation(this),
hoverElevation: buttonTheme.getHoverElevation(this),
highlightElevation: buttonTheme.getHighlightElevation(this),
disabledElevation: buttonTheme.getDisabledElevation(this),
padding: buttonTheme.getPadding(this),
visualDensity: visualDensity ?? theme.visualDensity,
constraints: buttonTheme.getConstraints(this).copyWith(
minWidth: minWidth,
minHeight: height,
),
shape: buttonTheme.getShape(this),
clipBehavior: clipBehavior,
focusNode: focusNode,
autofocus: autofocus,
materialTapTargetSize: buttonTheme.getMaterialTapTargetSize(this),
animationDuration: buttonTheme.getAnimationDuration(this),
child: child,
);
}
可以看到FlatButton中又包了一层RawMaterialButton，而这个也是有padding的，是由buttonTheme的padding决定的。
所以要去掉这个padding就必须要重新设置buttonTheme，需要在button外面加一层theme，如下：
Theme(
data: ThemeData(
buttonTheme: ButtonThemeData(
padding: EdgeInsets.all(0),
),
),
child: FlatButton(
minWidth: 0,
padding: EdgeInsets.all(0),
child: Text("1"),
onPressed: (){
...
},
),
),
这样就彻底去除了按钮的间距。
注意这个样式只对这个button起作用，如果想对整个页面（或更多组件）起作用就可以放到更外层
关注公众号：BennuCTech，获取更多干货！