Flutter之Button，寬度佔滿屏幕，四周帶icon的Button

1、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,
  ),
)
複製代碼

2、自定義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地址：pub.dev/packages/fu…
github地址：github.com/tianyu704/f…

總結：初學Flutter不久，也還有好多不熟悉或不懂的地方，你們遇到問題能夠查看源碼或多跟同行交流，遇到問題總能解決的，加油。