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起作用，如果想对整个页面（或更多组件）起作用就可以放到更外层
![[Flutter]足够入门的Dart语言系列之面向对象：类成员的可见性、常量和工厂构造函数详解](https://ucc.alicdn.com/pic/developer-ecology/9c6936bb8057480485ed00e27470286c.png?x-oss-process=image/resize,h_160,m_lfit)
