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不久，也还有好多不熟悉或不懂的地方，你们遇到问题能够查看源码或多跟同行交流，遇到问题总能解决的，加油。