# Button

按钮对已有的 FlatButton 以及 RaisedButton 做了一些扩展，也新增了支持渐变背景的 FLGradientButton 和支持加载动画的 FLLoadingButton 。

# FLFlatButton

FLFlatButton 基于 FlatButton，新增了 expanded 属性和 icon 的工厂方法用于指定 icon 位于 Button 中的位置。

# expanded:

FLFlatButton(
    expanded: true,
    color: Color(0xFF0F4C81),
    textColor: Colors.white,
    child: Text('Expanded Button', textAlign: TextAlign.center),
    onPressed: () => print('on click'),
),

# icon:

FLFlatButton.icon(
    padding: const EdgeInsets.all(5),
    textColor: Color(0xFF0F4C81),
    onPressed: () => print('on click'),
    icon: Icon(Icons.account_box, color: mainColor),
    label: Text('Click to change icon position'),
    spacing: 5,
    iconPosition: FLPosition.right,
)

# FLRaisedButton

FLRaisedButton 基于 RaisedButton，同样新增了 expanded 属性和 icon 的工厂方法用于指定 icon 位于 Button 中的位置，用法同 FLFlatButton。

# FLGradientButton

FLGradientButton 支持渐变背景，有三种工厂方法来显示不同类型的渐变：linear, sweep 以及 radial。

# linear

FLGradientButton.linear(
    textColor: Colors.white,
    child: Text('Linear Gradient Button'),
    colors: [Colors.lightBlueAccent, Color(0xFF0F4C81)],
    onPressed: () => print('on click'),
)

# sweep

FLGradientButton.sweep(
    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
    center: FractionalOffset.center,
    startAngle: 0.0,
    endAngle: math.pi * 2,
    colors: const <Color>[
        Color(0xFF4285F4), // blue
        Color(0xFF34A853), // green
        Color(0xFFFBBC05), // yellow
        Color(0xFFEA4335), // red
        Color(0xFF4285F4), // blue again to seamlessly transition to the start
    ],
    stops: const <double>[0.0, 0.25, 0.5, 0.75, 1.0],
    textColor: Colors.white,
    child: Text('Sweep Gradient Button'),
    onPressed: () => print('on click'),
)

# radial

FLGradientButton.radial(
    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
    center: const Alignment(0.7, -0.6), // near the top right
    radius: 0.2,
    colors: [
        const Color(0xFFFFFF00), // yellow sun
        const Color(0xFF0099FF), // blue sky
    ],
    stops: [0.4, 1.0],
    textColor: Colors.white,
    child: Text('Radial Gradient Button'),
    onPressed: () => print('on click'),
)

# FLLoadingButton

FLLoadingButton 通过设置 loading 属性来控制是否展示 indicator, 同样也提供了对 indicator 进行样式配置的属性。

# text & indicator

FLLoadingButton(
    child: Text('Login'),
    color: Color(0xFF0F4C81),
    disabledColor: Color(0xFF0F4C81),
    indicatorColor: Colors.white,
    disabledTextColor: Colors.grey.withAlpha(40),
    textColor: Colors.white,
    loading: _loading,
    minWidth: 200,
    onPressed: () {
        setState(() => _loading = true);
        Future.delayed(Duration(seconds: 3), () => setState(() => _loading = false));
    },
)

# only indicator

FLLoadingButton(
    child: Text('Login'),
    color: Color(0xFF0F4C81),
    disabledColor: Color(0xFF0F4C81),
    indicatorColor: Colors.white,
    textColor: Colors.white,
    loading: _loading,
    minWidth: 200,
    indicatorOnly: true,
    onPressed: () {
        setState(() => _loading = true);
        Future.delayed(Duration(seconds: 3), () => setState(() => _loading = false));
    }
)

# API

# FLFlatButton

属性	描述	类型	默认值
expanded	扩充为最大宽度	bool	false

# FLFlatButton.icon

属性	描述	类型
iconPosition	icon 位置	FLPosition
spacing	icon 与 label 之间的距离	double
icon	icon 组件	Widget
label	文字组件	Widget

# FLRaisedButton

属性	描述	类型	默认值
expanded	扩充为最大宽度	bool	false

# FLRaisedButton.icon

属性	描述	类型
iconPosition	icon 位置	FLPosition
spacing	icon 与 label 之间的距离	double
icon	icon 组件	Widget
label	文字组件	Widget

# FLGradientButton

# FLGradientButton.linear

属性	描述	类型	默认值
colors	颜色数组	List<Color>
stops	从0.0到1.0的值列表，表示颜色对应节点	List<double>
begin	起始点 0.0 所在位置	AlignmentGeometry	Alignment.centerLeft
end	终止点 1.0 所在位置	AlignmentGeometry	Alignment.centerRight
tileMode	该渐变应如何平铺超出该区域的平面	TileMode	TileMode.clamp

# FLGradientButton.sweep

属性	描述	类型	默认值
colors	颜色数组	List<Color>
stops	从0.0到1.0的值列表，表示颜色对应节点	List<double>
center	渐变的中心点	AlignmentGeometry	Alignment.center
startAngle	起始点 0.0 所在角度	double	0.0
endAngle	终止点 1.0 所在角度	double	math.pi * 2
tileMode	该渐变应如何平铺超出该区域的平面	TileMode	TileMode.clamp

# FLGradientButton.radial

属性	描述	类型	默认值
colors	颜色数组	List<Color>
stops	从0.0到1.0的值列表，表示颜色对应节点	List<double>
center	渐变的中心点	AlignmentGeometry	Alignment.center
radius	渐变半径	double	0.5
tileMode	该渐变应如何平铺超出该区域的平面	TileMode	TileMode.clamp
focal	渐变焦点	AlignmentGeometry
focalRadius	焦点半径	double	0.0

# FLLoadingButton

属性	描述	类型	默认值
indicatorColor	指示器颜色	Color	Theme.of(context).accentColor
indicatorSize	指示器尺寸	double
indicatorOnly	加载时是否只显示指示器	bool	false
loading	是否正在加载	bool	false

Label →