Flutter气泡选择器插件bubble_picker的使用
Flutter气泡选择器插件bubble_picker的使用
简介
Bubble Picker
是一个可定制且交互式的Flutter气泡选择器组件。该组件展示了一组吸引到中心点并相互排斥的气泡。用户可以通过点击或拖动这些气泡来与之互动。
目录
功能
- 交互式气泡:气泡可以被拖动、点击,并响应用户交互。
- 可定制外观:可以定制每个气泡的颜色、大小、图像和渐变。
- 动态动画:气泡平滑地向中心点移动并相互排斥。
- 灵活配置:用子部件、图像和自定义行为定义气泡。
使用方法
首先,导入 BubblePicker
组件:
import 'package:bubble_picker/bubble_picker.dart';
然后,在你的Dart文件中创建一个 BubblePicker
组件:
BubblePicker(
size: Size(400, 800),
bubbles: [
BubbleData(
color: Colors.blue,
radius: 0.1,
child: Icon(Icons.star, color: Colors.white),
),
BubbleData(
imageProvider: AssetImage('assets/images/bubble.png'),
radius: 0.15,
),
// 添加更多气泡
],
)
示例代码
以下是一个完整的示例应用,展示了如何使用 BubblePicker
:
import 'package:flutter/material.dart';
import 'package:bubble_picker/bubble_picker.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Bubble Picker Example'),
),
body: Center(
child: BubblePicker(
size: Size(400, 800),
bubbles: [
BubbleData(
color: Colors.red,
radius: 0.1,
child: Text('A', style: TextStyle(color: Colors.white)),
),
BubbleData(
imageProvider: AssetImage('assets/bubble_image.png'),
),
BubbleData(
imageProvider: AssetImage('assets/bubble_image.png'),
color: Colors.red.withOpacity(0.3),
radius: 0.2,
),
BubbleData(
imageProvider: AssetImage('assets/bubble_image.png'),
gradient: LinearGradient(
colors: [
const Color(0xFFFF6A88).withOpacity(0.5),
const Color(0xFFFFD194).withOpacity(0.5),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
),
// 添加更多气泡
],
),
),
),
);
}
}
自定义
BubbleData 属性
color
:气泡的背景颜色。如果设置了imageProvider
,则会叠加在背景图像上。radius
:气泡的半径,以组件高度的比例表示。child
:显示在气泡中心的小部件。onTapBubble
:当气泡被点击时触发的回调函数。imageProvider
:作为气泡背景的图像。colorFilter
:应用于背景图像的颜色滤镜。boxFit
:背景图像如何适应气泡。gradient
:作为气泡背景的渐变。如果设置了imageProvider
,则会叠加在背景图像上。
贡献
欢迎贡献!如果你发现任何问题或有建议,请随时打开一个问题或提交拉取请求。
许可证
该项目根据MIT许可证授权 - 详情请参阅 LICENSE 文件。
更多关于Flutter气泡选择器插件bubble_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter气泡选择器插件bubble_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何在Flutter中使用bubble_picker
插件的示例代码。bubble_picker
是一个用于创建气泡选择器的插件,非常适合用于标签选择、选项选择等场景。
首先,确保你已经在pubspec.yaml
文件中添加了bubble_picker
依赖:
dependencies:
flutter:
sdk: flutter
bubble_picker: ^最新版本号 # 请替换为实际最新版本号
然后运行flutter pub get
来获取依赖。
接下来,我们编写一个示例代码来展示如何使用bubble_picker
。
import 'package:flutter/material.dart';
import 'package:bubble_picker/bubble_picker.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bubble Picker Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: BubblePickerExample(),
);
}
}
class BubblePickerExample extends StatefulWidget {
@override
_BubblePickerExampleState createState() => _BubblePickerExampleState();
}
class _BubblePickerExampleState extends State<BubblePickerExample> {
List<String> items = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'];
List<int> selectedItems = [];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bubble Picker Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Selected Items:',
style: TextStyle(fontSize: 18),
),
SizedBox(height: 8),
Wrap(
spacing: 8,
runSpacing: 8,
children: selectedItems.map((index) {
return Chip(
label: Text(items[index]),
backgroundColor: Colors.blue.shade200,
onDeleted: () {
setState(() {
selectedItems.remove(index);
});
},
);
}).toList(),
),
SizedBox(height: 24),
Expanded(
child: BubblePicker(
itemCount: items.length,
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade300),
borderRadius: BorderRadius.circular(12),
),
padding: EdgeInsets.all(8),
child: Center(
child: Text(
items[index],
style: TextStyle(fontSize: 16),
),
),
);
},
onSelected: (index) {
setState(() {
if (!selectedItems.contains(index)) {
selectedItems.add(index);
}
});
},
onDeselected: (index) {
setState(() {
selectedItems.remove(index);
});
},
selectedItems: selectedItems,
),
),
],
),
),
);
}
}
代码解释:
-
依赖添加:确保在
pubspec.yaml
中添加bubble_picker
依赖。 -
主函数:创建一个简单的Flutter应用,并在首页使用
BubblePickerExample
组件。 -
数据准备:准备一个包含多个选项的
items
列表,以及一个存储选中项索引的selectedItems
列表。 -
UI构建:
- 使用
Column
布局来排列文本和选中的芯片(Chip)。 - 使用
Wrap
组件来动态显示选中的芯片,并允许删除。 - 使用
BubblePicker
组件来创建气泡选择器,并设置相关回调。
- 使用
-
事件处理:
onSelected
:当用户选择一个项时,将该项的索引添加到selectedItems
列表中。onDeselected
:当用户取消选择一个项时,从selectedItems
列表中移除该项的索引。
运行上述代码后,你应该能够看到一个简单的气泡选择器示例,可以选择和取消选择项,并在界面上显示选中的项。
请根据你的实际需求调整代码,例如修改样式、处理更多选项等。