一、Button寬度占滿屏幕或自定義
Flutter為我們提供了各式各樣的Button,包括FlatButton、RaisedButton、OutlineButton、RaisedButton.icon、FlatButton.icon、OutlineButton.icon......等，而這些Button都是直接或間接繼承于MaterialButton，在MaterialButton基礎上封裝了一下屬性，或拓展了一下child屬性增加了icon。
但是，當我們用FlatButton、RaisedButton 、OutlineButton時發現Button的寬度是包裹內容的，那怎么能讓寬度占滿屏幕或自定義大小呢？
方案一：直接使用MaterialButton
我們看下MaterialButton中提供了2個屬性：minWidth和height，我們直接設置這2個屬性的寬度或者高度就可以，如果想寬度占滿全屏可以直接設置成double.infinity，如下：
MaterialButton(
onPressed: () {},
child: Text("寬度占滿了"),
minWidth: double.infinity,
height: 50.0,
color: Colors.green,
textColor: Colors.white,
)
方案二：設置在ButtonTheme中設置寬度
我們看到MaterialButton源碼中的寬高有這樣一句話
/// Defaults to the value from the current [ButtonTheme].
final double minWidth;
可以知道Button默認的寬高是來源于ButtonTheme,其實MaterialButton的許多屬性的默認值都來源于ButtonTheme，所以我們直接全局設置這個就好了，如下：
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
buttonTheme: ButtonThemeData(minWidth: double.infinity, height: 50.0),
),
home: SplashPage(),
);
}
}
這樣所有你用的Button，不管是FlatButton、RaisedButton、OutlineButton還是MaterialButton都默認成寬度最大，高度50了，大家根據具體情況去做就好了。
方案三：在Button之外再套一層控制大小
這種情況可直接使用FlatButton、RaisedButton、OutlineButton如下：
SizedBox(
width: double.infinity,
height: 50,
child: RaisedButton(
onPressed: () {},
child: Text("寬度占滿了"),
color: Colors.green,
textColor: Colors.white,
),
),
當然不止SizedBox可以控制大小，其他能設置寬高的布局widget也可以，大家視情況而定就好了。如Container，下面這個寬度占滿，距左右邊距20。
Container(
width: double.infinity,
height: 50,
padding: EdgeInsets.only(left: 20,right: 20),
child: RaisedButton(
onPressed: () {},
child: Text("寬度占滿了"),
color: Colors.green,
textColor: Colors.white,
),
)
二、自定義Button，支持文字上下左右帶icon
我們看下RaisedButton.icon、FlatButton.icon、OutlineButton.icon這些的icon都是怎么加上的，源碼：
class _FlatButtonWithIcon extends FlatButton with MaterialButtonWithIconMixin {
_FlatButtonWithIcon({
Key key,
@required VoidCallback onPressed,
...
...
MaterialTapTargetSize materialTapTargetSize,
@required Widget icon,
@required Widget label,
}) : assert(icon != null),
assert(label != null),
super(
key: key,
onPressed: onPressed,
...
...
materialTapTargetSize: materialTapTargetSize,
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
icon,
const SizedBox(width: 8.0),
label,
],
),
);
}
其實很簡單，就是定義了個icon，然后，把這個icon和label用Row給包起來了，照這樣我們可以定義任何按鈕里面的布局了，可以放任何東西進去。
于是，我們先自定義一個類似于Android中Button，支持android:drawableLeft，android:drawableTop,android:drawableRight,android:drawableBottom,如下：
import 'package:flutter/material.dart';
///
/// Create by Hugo.Guo
/// Date: 2019-06-13
///
class FullIconButton extends MaterialButton with MaterialButtonWithIconMixin {
FullIconButton({
Key key,
@required VoidCallback onPressed,
ValueChanged<bool> onHighlightChanged,
ButtonTextTheme textTheme,
Color textColor,
Color disabledTextColor,
Color color,
Color disabledColor,
Color focusColor,
Color hoverColor,
Color highlightColor,
Color splashColor,
Brightness colorBrightness,
double elevation,
double highlightElevation,
double disabledElevation,
ShapeBorder shape,
Clip clipBehavior = Clip.none,
FocusNode focusNode,
MaterialTapTargetSize materialTapTargetSize,
Duration animationDuration,
double minWidth,
double height,
Widget leftIcon,
Widget topIcon,
Widget rightIcon,
Widget bottomIcon,
EdgeInsetsGeometry textPadding,
Widget label,
}) : assert(elevation == null || elevation >= 0.0),
assert(highlightElevation == null || highlightElevation >= 0.0),
assert(disabledElevation == null || disabledElevation >= 0.0),
super(
key: key,
onPressed: onPressed,
onHighlightChanged: onHighlightChanged,
textTheme: textTheme,
textColor: textColor,
disabledTextColor: disabledTextColor,
color: color,
disabledColor: disabledColor,
focusColor: focusColor,
hoverColor: hoverColor,
highlightColor: highlightColor,
splashColor: splashColor,
colorBrightness: colorBrightness,
elevation: elevation,
highlightElevation: highlightElevation,
disabledElevation: disabledElevation,
shape: shape,
clipBehavior: clipBehavior,
focusNode: focusNode,
materialTapTargetSize: materialTapTargetSize,
animationDuration: animationDuration,
minWidth: minWidth,
height: height,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Offstage(
offstage: topIcon == null,
child: topIcon,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Offstage(
offstage: leftIcon == null,
child: leftIcon,
),
Padding(
padding: textPadding,
child: label,
),
Offstage(
offstage: rightIcon == null,
child: rightIcon,
),
],
),
Offstage(
offstage: bottomIcon == null,
child: bottomIcon,
),
],
),
);
}
這里構造函數里我加了這些屬性
double minWidth,
double height,
Widget leftIcon,
Widget topIcon,
Widget rightIcon,
Widget bottomIcon,
EdgeInsetsGeometry textPadding,
我們可以定義寬高，上下左右圖標，還有文字和圖標的間距，這樣用起來會比較方便了。當然如果你有其他需求一樣可以自己加進去。
另外我們用了Column,Row,Offstage；Column控制豎排的widget，Row控制橫排的widget，Offstage控制icon的顯示或隱藏，Offstage有2個屬性offstage和child，其中offstage=true時Offstage就不顯示了。
下面我們用下這個FullIconButton
FullIconButton(
label: Text("GitHub登錄"),
color: Colors.blue,
textColor: Colors.white,
onPressed: () {},
minWidth: double.infinity,
leftIcon: Image.asset(
"images/icon_github.png",
width: 24,
height: 24,
color: Colors.white,
),
rightIcon: Icon(Icons.group),
topIcon: Text("我是??"),
bottomIcon: Text("我是??"),
textPadding: EdgeInsets.only(left: 10, right: 10),
)
效果如下：
當然四周定義的是widget，所以你可以放任何widget進去，不只是icon。通過這個自定義Button，我們可以定義任何我們想要的通用的widget，不明白或者遇到問題的時候查看下源碼是怎么做的就可以了。
pub地址：https://pub.dev/packages/full_icon_button
github地址：https://github.com/tianyu704/full_icon_button
