一、Button寬度占滿屏幕或自定義
Flutter為我們提供了各式各樣的Button,包括FlatButton、RaisedButton、OutlineButton、RaisedButton.icon、FlatButton.icon、OutlineButton.icon......等，而這些Button都是直接或間接繼承于MaterialButton，在MaterialButton基礎(chǔ)上封裝了一下屬性，或拓展了一下child屬性增加了icon。
但是，當(dāng)我們用FlatButton、RaisedButton 、OutlineButton時(shí)發(fā)現(xiàn)Button的寬度是包裹內(nèi)容的，那怎么能讓寬度占滿屏幕或自定義大小呢？
方案一：直接使用MaterialButton
我們看下MaterialButton中提供了2個(gè)屬性：minWidth和height，我們直接設(shè)置這2個(gè)屬性的寬度或者高度就可以，如果想寬度占滿全屏可以直接設(shè)置成double.infinity，如下：
MaterialButton(
onPressed: () {},
child: Text("寬度占滿了"),
minWidth: double.infinity,
height: 50.0,
color: Colors.green,
textColor: Colors.white,
)
方案二：設(shè)置在ButtonTheme中設(shè)置寬度
我們看到MaterialButton源碼中的寬高有這樣一句話
/// Defaults to the value from the current [ButtonTheme].
final double minWidth;
可以知道Button默認(rèn)的寬高是來源于ButtonTheme,其實(shí)MaterialButton的許多屬性的默認(rèn)值都來源于ButtonTheme，所以我們直接全局設(shè)置這個(gè)就好了，如下：
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都默認(rèn)成寬度最大，高度50了，大家根據(jù)具體情況去做就好了。
方案三：在Button之外再套一層控制大小
這種情況可直接使用FlatButton、RaisedButton、OutlineButton如下：
SizedBox(
width: double.infinity,
height: 50,
child: RaisedButton(
onPressed: () {},
child: Text("寬度占滿了"),
color: Colors.green,
textColor: Colors.white,
),
),
當(dāng)然不止SizedBox可以控制大小，其他能設(shè)置寬高的布局widget也可以，大家視情況而定就好了。如Container，下面這個(gè)寬度占滿，距左右邊距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，支持文字上下左右?guī)con
我們看下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,
],
),
);
}
其實(shí)很簡單，就是定義了個(gè)icon，然后，把這個(gè)icon和label用Row給包起來了，照這樣我們可以定義任何按鈕里面的布局了，可以放任何東西進(jìn)去。
于是，我們先自定義一個(gè)類似于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,
),
],
),
);
}
這里構(gòu)造函數(shù)里我加了這些屬性
double minWidth,
double height,
Widget leftIcon,
Widget topIcon,
Widget rightIcon,
Widget bottomIcon,
EdgeInsetsGeometry textPadding,
我們可以定義寬高，上下左右圖標(biāo)，還有文字和圖標(biāo)的間距，這樣用起來會(huì)比較方便了。當(dāng)然如果你有其他需求一樣可以自己加進(jìn)去。
另外我們用了Column,Row,Offstage；Column控制豎排的widget，Row控制橫排的widget，Offstage控制icon的顯示或隱藏，Offstage有2個(gè)屬性offstage和child，其中offstage=true時(shí)Offstage就不顯示了。
下面我們用下這個(gè)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),
)
效果如下：
當(dāng)然四周定義的是widget，所以你可以放任何widget進(jìn)去，不只是icon。通過這個(gè)自定義Button，我們可以定義任何我們想要的通用的widget，不明白或者遇到問題的時(shí)候查看下源碼是怎么做的就可以了。
pub地址：https://pub.dev/packages/full_icon_button
github地址：https://github.com/tianyu704/full_icon_button
