Flutter按钮组件插件bs_flutter_buttons的使用
Flutter按钮组件插件bs_flutter_buttons的使用
Bootstrap 的自定义按钮样式用于表单、对话框等中的操作，支持多种尺寸、状态等。
特性：
- 8种按钮颜色及2种样式
- 带图标的按钮
- 带徽章的按钮
- 下拉按钮
开始使用
在 pubspec.yaml 文件中添加依赖：
dependencies:
...
bs_flutter_buttons: any
按钮
示例代码
import 'package:bs_flutter_responsive/bs_flutter_responsive.dart';
import 'package:bs_flutter_buttons/bs_flutter_buttons.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool disabled = true;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: GestureDetector(
onTap: () {
OverlayDropdownButton.removeAll();
},
child: Scaffold(
appBar: AppBar(title: Text('Bootstraps Buttons')),
body: Scrollbar(
child: SingleChildScrollView(
child: Container(
height: 2000,
padding: EdgeInsets.all(20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
BsRow(
children: [
BsCol(
margin: EdgeInsets.only(bottom: 10.0),
sizes: ColScreen.all(Col.col_12),
child: Wrap(
children: [
BsButton(
disabled: disabled,
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.primary,
prefixIcon: Icons.block,
label: Text('Primary'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {
setState(() {
disabled = !disabled;
});
},
style: BsButtonStyle.primary,
prefixIcon: Icons.block,
label: Text('${disabled ? '启用' : '禁用'}按钮'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
prefixIcon: Icons.block,
label: Text('Secondary'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.success,
prefixIcon: Icons.block,
label: Text('成功'),
),
BsButton(
width: 900,
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.danger,
prefixIcon: Icons.block,
label: Text('危险'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.warning,
prefixIcon: Icons.block,
label: Text('警告'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.info,
prefixIcon: Icons.block,
label: Text('信息'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.light,
prefixIcon: Icons.block,
label: Text('浅色'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.dark,
prefixIcon: Icons.block,
label: Text('深色'),
),
BsButton(
margin: EdgeInsets.only(bottom: 10.0),
onPressed: () {},
size: BsButtonSize.btnIconMd,
prefixIcon: Icons.check,
)
],
),
),
BsCol(
margin: EdgeInsets.only(bottom: 10.0),
sizes: ColScreen.all(Col.col_12),
child: Wrap(
children: [
BsButton(
disabled: disabled,
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.outlinePrimary,
label: Text('轮廓主色'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.outlineSecondary,
label: Text('轮廓次色'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.outlineSuccess,
label: Text('轮廓成功'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.outlineDanger,
label: Text('轮廓危险'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.outlineInfo,
label: Text('轮廓信息'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.outlineLight,
label: Text('轮廓浅色'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.outlineDark,
label: Text('轮廓深色'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle(
borderRadius: BorderRadius.circular(50.0),
backgroundColor: Colors.blue,
color: Colors.white),
label: Text('自定义轮廓'),
),
],
),
),
BsCol(
margin: EdgeInsets.only(bottom: 10.0),
sizes: ColScreen.all(Col.col_12),
child: Wrap(
children: [
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.primary,
size: BsButtonSize.btnSm,
label: Text('小'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.primary,
label: Text('中'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.primary,
size: BsButtonSize.btnLg,
label: Text('大'),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.primary,
size: BsButtonSize.btnIconSm,
prefixIcon: Icons.check,
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.primary,
size: BsButtonSize.btnIconMd,
prefixIcon: Icons.check,
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.primary,
size: BsButtonSize.btnIconLg,
prefixIcon: Icons.check,
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.primary,
size: BsButtonSize.btnSm,
label: Text('小'),
prefixIcon: Icons.calendar_today,
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.primary,
label: Text('中'),
prefixIcon: Icons.calendar_today,
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.primary,
size: BsButtonSize.btnLg,
label: Text('大'),
prefixIcon: Icons.calendar_today,
),
],
),
),
BsCol(
margin: EdgeInsets.only(bottom: 10.0),
sizes: ColScreen.all(Col.col_12),
child: Wrap(
children: [
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.primary,
size: BsButtonSize.btnSm,
label: Text('小'),
prefixIcon: Icons.edit,
badge: BsBadge(
style: BsBadgeStyle.info,
size: BsBadgeSize.small,
child: Text('4'),
),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.primary,
size: BsButtonSize.btnMd,
label: Text('通知'),
prefixIcon: Icons.calendar_today,
badge: BsBadge(
style: BsBadgeStyle.warning,
child: Text('4'),
),
),
BsButton(
margin:
EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.primary,
size: BsButtonSize.btnLg,
label: Text('通知'),
prefixIcon: Icons.calendar_today,
badge: BsBadge(
style: BsBadgeStyle.success,
size: BsBadgeSize.large,
child: Text('4'),
),
),
],
),
),
BsCol(
sizes: ColScreen.all(Col.col_12),
child: Wrap(
children: [
BsDropdownButton(
margin: EdgeInsets.only(right: 5.0),
toggleMenu: (_) => BsButton(
onPressed: () => _.toggle(),
style: BsButtonStyle.primary,
suffixIcon: Icons.arrow_drop_down,
label: Text('底部'),
),
dropdownDirection: BsDropdownDirection.bottom,
dropdownMenuSize: BsDropdownMenuSize(
minWidth: 500,
),
dropdownMenu: BsDropdownMenu(
children: [
BsDropdownItem(child: Text('操作')),
BsDropdownItem(
child: Text('另一个操作')),
BsDropdownItem(
child: Text('其他内容')),
BsDropdownDivider(),
BsDropdownItem(
child: Text('单独链接')),
],
),
),
BsDropdownButton(
margin: EdgeInsets.only(right: 5.0),
toggleMenu: (_) => BsButton(
onPressed: () => _.toggle(),
style: BsButtonStyle.primary,
suffixIcon: Icons.arrow_drop_down,
label: Text('顶部'),
),
dropdownDirection: BsDropdownDirection.top,
dropdownMenu: BsDropdownMenu(
header: BsDropdownHeader(
child: Text('下拉头')),
children: [
BsDropdownItem(child: Text('操作')),
BsDropdownItem(
child: Text('另一个操作')),
BsDropdownItem(
child: Text('其他内容')),
BsDropdownDivider(),
BsDropdownItem(
child: Text('单独链接')),
],
),
),
BsDropdownButton(
margin: EdgeInsets.only(right: 5.0),
toggleMenu: (_) => BsButton(
onPressed: () => _.toggle(),
style: BsButtonStyle.primary,
suffixIcon: Icons.arrow_right,
label: Text('右侧'),
),
dropdownDirection: BsDropdownDirection.right,
dropdownMenu: BsDropdownMenu(
children: [
BsDropdownItem(child: Text('操作')),
BsDropdownItem(
child: Text('另一个操作')),
BsDropdownItem(
child: Text('其他内容')),
BsDropdownDivider(),
BsDropdownItem(
child: Text('单独链接')),
],
),
),
BsDropdownButton(
margin: EdgeInsets.only(right: 5.0),
toggleMenu: (_) => BsButton(
onPressed: () => _.toggle(),
style: BsButtonStyle.primary,
prefixIcon: Icons.arrow_left,
label: Text('左侧'),
),
dropdownDirection: BsDropdownDirection.left,
dropdownMenu: BsDropdownMenu(
children: [
BsDropdownItem(child: Text('操作')),
BsDropdownItem(
child: Text('另一个操作')),
BsDropdownItem(
child: Text('其他内容')),
BsDropdownDivider(),
BsDropdownItem(
child: Text('单独链接')),
],
),
),
BsDropdownButton(
margin: EdgeInsets.only(right: 5.0),
toggleMenu: (_) => BsButton(
onPressed: () => _.toggle(),
style: BsButtonStyle.primary,
suffixIcon: Icons.arrow_right,
label: Text('水平'),
),
dropdownDirection:
BsDropdownDirection.horizontal,
dropdownMenu: BsDropdownMenu(
children: [
BsDropdownItem(child: Text('操作')),
BsDropdownItem(
child: Text('另一个操作')),
BsDropdownItem(
child: Text('其他内容')),
BsDropdownDivider(),
BsDropdownItem(
child: Text('单独链接')),
],
),
),
BsDropdownButton(
margin: EdgeInsets.only(right: 5.0),
toggleMenu: (_) => BsButton(
onPressed: () => _.toggle(),
style: BsButtonStyle.primary,
suffixIcon: Icons.arrow_drop_down,
label: Text('垂直'),
),
dropdownDirection: BsDropdownDirection.vertical,
dropdownMenu: BsDropdownMenu(
children: [
BsDropdownItem(
child: Text('操作'), active: true),
BsDropdownItem(
child: Text('另一个操作')),
BsDropdownItem(
child: Text('其他内容'),
disabled: true),
BsDropdownDivider(),
BsDropdownItem(
child: Text('单独链接')),
],
),
),
],
),
)
],
),
Scrollbar(
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(top: 10.0),
child: LayoutBuilder(
builder: (context, constraints) {
return Container(
child: Row(
crossAxisAlignment:
CrossAxisAlignment.start,
children: [
BsDropdownButton(
margin: EdgeInsets.only(right: 5.0),
toggleMenu: (_) => BsButton(
onPressed: () => _.toggle(),
style: BsButtonStyle.primary,
suffixIcon: Icons.arrow_drop_down,
label: Text('垂直'),
),
dropdownDirection:
BsDropdownDirection.vertical,
dropdownMenu: BsDropdownMenu(
children: [
BsDropdownItem(
child: Text('操作')),
BsDropdownItem(
child: Text('另一个操作')),
BsDropdownItem(
child: Text(
'其他内容')),
BsDropdownDivider(),
BsDropdownItem(
child: Text('单独链接')),
],
),
),
BsDropdownButton(
margin: EdgeInsets.only(
left: 1500, right: 1500),
toggleMenu: (_) => BsButton(
onPressed: () => _.toggle(),
style: BsButtonStyle.primary,
suffixIcon: Icons.arrow_drop_down,
label: Text('水平按钮'),
),
dropdownDirection:
BsDropdownDirection.horizontal,
dropdownMenu: BsDropdownMenu(
children: [
BsDropdownItem(
child: Text('操作')),
BsDropdownItem(
child: Text('另一个操作')),
BsDropdownItem(
child: Text(
'其他内容')),
BsDropdownDivider(),
BsDropdownItem(
child: Text('单独链接')),
],
),
),
],
),
);
},
),
),
),
),
),
],
),
),
))),
),
);
}
}
使用说明
按钮基本用法
BsButton(
margin: EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.primary,
size: BsButtonSize.btnIconMd,
prefixIcon: Icons.check,
)
带有图标的按钮
BsButton(
margin: EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
prefixIcon: Icons.block,
label: Text('Secondary'),
)
带有徽章的按钮
BsButton(
margin: EdgeInsets.only(right: 10.0, bottom: 10.0),
onPressed: () {},
style: BsButtonStyle.primary,
size: BsButtonSize.btnSm,
label: Text('小'),
prefixIcon: Icons.edit,
badge: BsBadge(
style: BsBadgeStyle.info,
size: BsBadgeSize.small,
child: Text('4'),
),
)
下拉按钮
BsDropdownButton(
margin: EdgeInsets.only(right: 5.0),
toggleMenu: (_) => BsButton(
onPressed: () => _.toggle(),
style: BsButtonStyle.primary,
suffixIcon: Icons.arrow_drop_down,
label: Text('Primary'),
),
dropdownMenu: BsDropdownMenu(
children: [
BsDropdownHeader(child: Text('Dropdown Header')),
BsDropdownItem(child: Text('Action')),
BsDropdownItem(child: Text('Another Action')),
BsDropdownItem(child: Text('Something else here')),
BsDropdownItem(child: Text('Separate link')),
],
),
)
自定义下拉菜单大小和方向
BsDropdownButton(
margin: EdgeInsets.only(right: 5.0),
toggleMenu: (_) => BsButton(
onPressed: () => _.toggle(),
style: BsButtonStyle.primary,
suffixIcon: Icons.arrow_drop_down,
label: Text('Primary'),
),
dropdownDirection: BsDropdownDirection.bottom,
dropdownMenuSize: BsDropdownMenuSize(
minWidth: 150,
maxWidth: 300,
minHeight: 150,
maxHeight: 300
),
dropdownMenu: BsDropdownMenu(
children: [
BsDropdownHeader(child: Text('Dropdown Header')),
BsDropdownItem(child: Text('Action')),
BsDropdownItem(child: Text('Another Action')),
BsDropdownItem(child: Text('Something else here')),
BsDropdownItem(child: Text('Separate link')),
],
),
)
自定义下拉菜单样式
BsDropdownButton(
margin: EdgeInsets.only(right: 5.0),
toggleMenu: (_) => BsButton(
onPressed: () => _.toggle(),
style: BsButtonStyle.primary,
suffixIcon: Icons.arrow_drop_down,
label: Text('Primary'),
),
dropdownMenuStyle: BsDropdownMenuStyle(
backgroundColor: Colors.red,
boxShadow: [
BoxShadow(
color: Color(0xffd9d9d9),
spreadRadius: 2.0,
blurRadius: 5.0
)
]
),
dropdownMenu: BsDropdownMenu(
children: [
BsDropdownHeader(child: Text('Dropdown Header')),
BsDropdownItem(child: Text('Action')),
BsDropdownItem(child: Text('Another Action')),
BsDropdownItem(child: Text('Something else here')),
BsDropdownItem(child: Text('Separate link')),
],
),
)
设置下拉项为激活或禁用状态
BsDropdownButton(
margin: EdgeInsets.only(right: 5.0),
toggleMenu: (_) => BsButton(
onPressed: () => _.toggle(),
style: BsButtonStyle.primary,
suffixIcon: Icons.arrow_drop_down,
label: Text('Primary'),
),
dropdownMenu: BsDropdownMenu(
children: [
BsDropdownItem(
child: Text('Action'),
active: true,
activeStyle: ButtonStyle(),
activeTextStyle: TextStyle(),
),
BsDropdownItem(
child: Text('Another Action'),
disabled: true,
disabledStyle: ButtonStyle(),
disabledTextStyle: TextStyle(),
),
BsDropdownItem(child: Text('Something else here')),
BsDropdownDivider(),
BsDropdownItem(child: Text('Separate link')),
],
)
)
更多关于Flutter按钮组件插件bs_flutter_buttons的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter按钮组件插件bs_flutter_buttons的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
bs_flutter_buttons 是一个用于 Flutter 的按钮组件插件，它提供了多种样式和功能的按钮，可以帮助开发者快速构建美观且功能丰富的按钮。以下是如何使用 bs_flutter_buttons 插件的基本步骤。
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 bs_flutter_buttons 插件的依赖。
dependencies:
flutter:
sdk: flutter
bs_flutter_buttons: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 来安装依赖。
2. 导入包
在你的 Dart 文件中导入 bs_flutter_buttons 包。
import 'package:bs_flutter_buttons/bs_flutter_buttons.dart';
3. 使用按钮组件
bs_flutter_buttons 提供了多种按钮样式，例如：BsButton, BsOutlineButton, BsLinkButton 等。
基本按钮 (BsButton)
BsButton(
onPressed: () {
// 处理按钮点击事件
print('按钮被点击了');
},
style: BsButtonStyle.primary, // 按钮样式
child: Text('Primary Button'), // 按钮文本
)
轮廓按钮 (BsOutlineButton)
BsOutlineButton(
onPressed: () {
// 处理按钮点击事件
print('轮廓按钮被点击了');
},
style: BsButtonStyle.secondary, // 按钮样式
child: Text('Outline Button'), // 按钮文本
)
链接按钮 (BsLinkButton)
BsLinkButton(
onPressed: () {
// 处理按钮点击事件
print('链接按钮被点击了');
},
child: Text('Link Button'), // 按钮文本
)
4. 按钮样式
bs_flutter_buttons 提供了多种按钮样式，你可以通过 style 参数来设置按钮的样式。常见的样式包括：
BsButtonStyle.primaryBsButtonStyle.secondaryBsButtonStyle.successBsButtonStyle.dangerBsButtonStyle.warningBsButtonStyle.infoBsButtonStyle.lightBsButtonStyle.dark
5. 按钮大小
你还可以通过 size 参数来设置按钮的大小。常见的尺寸包括：
BsButtonSize.smallBsButtonSize.mediumBsButtonSize.large
BsButton(
onPressed: () {
print('小按钮被点击了');
},
style: BsButtonStyle.primary,
size: BsButtonSize.small, // 设置按钮大小
child: Text('Small Button'),
)
6. 按钮禁用
你可以通过 disabled 参数来禁用按钮。
BsButton(
onPressed: () {
print('按钮被点击了');
},
style: BsButtonStyle.primary,
disabled: true, // 禁用按钮
child: Text('Disabled Button'),
)
7. 完整示例
以下是一个完整的示例，展示了如何使用 bs_flutter_buttons 插件中的不同按钮组件。
import 'package:flutter/material.dart';
import 'package:bs_flutter_buttons/bs_flutter_buttons.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('bs_flutter_buttons 示例')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
BsButton(
onPressed: () {
print('Primary Button 被点击了');
},
style: BsButtonStyle.primary,
child: Text('Primary Button'),
),
SizedBox(height: 10),
BsOutlineButton(
onPressed: () {
print('Outline Button 被点击了');
},
style: BsButtonStyle.secondary,
child: Text('Outline Button'),
),
SizedBox(height: 10),
BsLinkButton(
onPressed: () {
print('Link Button 被点击了');
},
child: Text('Link Button'),
),
SizedBox(height: 10),
BsButton(
onPressed: () {
print('Disabled Button 被点击了');
},
style: BsButtonStyle.primary,
disabled: true,
child: Text('Disabled Button'),
),
],
),
),
),
);
}
}