# 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