# 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 →