Flutter之Button，宽度占满屏幕，四周带icon的Button
⼀、Button宽度占满屏幕或⾃定义
Flutter为我们提供了各式各样的Button，包
括FlatButton、RaisedButton、OutlineButton、RaisedButton.icon、FlatButton.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: ,
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(),
);
}
}
flutter pub复制代码
这样所有你⽤的Button，不管是FlatButton、RaisedButton、OutlineButton还是MaterialButton都默认成宽度最⼤，⾼度50了，⼤家根据具体情况去做就好了。
⽅案三：在Button之外再套⼀层控制⼤⼩
这种情况可直接使⽤FlatButton、RaisedButton、OutlineButton如下：
SizedBox(
width: double.infinity,
height: 50,
child: RaisedButton(
onPressed: () {},
child: Text("宽度占满了"),
color: ,
textColor: Colors.white,
),
),
复制代码
当然不⽌SizedBox可以控制⼤⼩，其他能设置宽⾼的布局widget也可以，⼤家视情况⽽定就好了。如Container，下⾯这个宽度占满，距左右边距20。
Container(
width: double.infinity,
height: 50,
padding: ly(left: 20,right: 20),
child: RaisedButton(
onPressed: () {},
child: Text("宽度占满了"),
color: ,
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 = ,
FocusNode focusNode,
MaterialTapTargetSize materialTapTargetSize,
Duration animationDuration,
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: ,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Offstage(
offstage: topIcon == null,
child: topIcon,
),
Row(
mainAxisAlignment: ,
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: up),
topIcon: Text("我是?"),
bottomIcon: Text("我是?"),
textPadding: ly(left: 10, right: 10),
)
复制代码
效果如下：
当然四周定义的是widget，所以你可以放任何widget进去，不只是icon。通过这个⾃定义Button，我们可以定义任何我们想要的通⽤的widget，不明⽩或者遇到问题的时候查看下源码是怎么做的就可以了。
pub地址：
github地址：
总结：初学Flutter不久，也还有好多不熟悉或不懂的地⽅，⼤家遇到问题可以查看源码或多跟同⾏交流，遇到问题总能解决的，加油。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。