Flutter气泡选择插件bubbles_selection的使用
🫧 Bubbles Selection
添加 😍 不那么无聊的 🫧 气泡选择到你的应用中。
查看演示 这里。
✨ 特性
- 完全可定制的气泡
- 完全可定制的气泡文本
- 带有碰撞系统的交互式气泡
- 灵活的API
- 有趣且易于互动
🚀 快速开始
你可以通过以下方式添加气泡选择：
BubbleSelection(
bubbles: [
Bubble(
text: "Gaming🎮",
activeColor: Colors.red,
inactiveColor: Colors.blue,
textStyle: const TextStyle(
fontSize: 18,
color: Colors.yellow,
),
),
Bubble(
text: "Food🍔",
activeColor: Colors.red,
inactiveColor: Colors.orange,
textStyle: const TextStyle(
fontSize: 16,
),
),
],
selectedBubbles: selectedBubbles,
size: const Size(
900,
300,
),
onSelect: (bubble) {
// 当前选择的气泡逻辑
},
onRemoved: (bubble) {
// 当前取消选择的气泡逻辑
},
)
示例代码
以下是完整的示例代码，展示如何在Flutter应用中使用bubbles_selection插件：
import 'package:bubbles_selection/bubbles_selection.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
Widget build(BuildContext context) {
return const MaterialApp(
home: BubbleSelectionUi(),
);
}
}
class BubbleSelectionUi extends StatefulWidget {
const BubbleSelectionUi({Key? key}) : super(key: key);
[@override](/user/override)
State<BubbleSelectionUi> createState() => _BubbleSelectionUiState();
}
class _BubbleSelectionUiState extends State<BubbleSelectionUi> {
late List<Bubble> selectedBubbles;
[@override](/user/override)
void initState() {
super.initState();
selectedBubbles = [];
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Spacer(),
const Text(
"Bubble Selection",
style: TextStyle(
fontSize: 32,
),
),
const Spacer(),
BubbleSelection(
backgroundColor: const Color.fromARGB(255, 0, 0, 0),
bubbles: [
Bubble(
text: "Gaming🎮",
activeColor: Colors.red.withOpacity(0.5),
inactiveColor: Colors.blue.withOpacity(0.5),
textStyle: const TextStyle(
fontSize: 18,
color: Colors.yellow,
),
),
Bubble(
text: "Food🍔",
activeColor: Colors.red.withOpacity(0.5),
inactiveColor: const Color.fromARGB(255, 237, 141, 17).withOpacity(0.5),
textStyle: const TextStyle(
fontSize: 16,
),
),
Bubble(
text: "Health\nFitness🏃",
activeColor: Colors.red.withOpacity(0.5),
inactiveColor: const Color.fromARGB(255, 16, 233, 186).withOpacity(0.5),
scale: 0.8,
),
Bubble(
text: "Worklife🌏",
activeColor: Colors.red.withOpacity(0.5),
inactiveColor: const Color.fromARGB(255, 89, 37, 245).withOpacity(0.5),
textStyle: const TextStyle(
fontSize: 24,
),
),
Bubble(
text: "Fun🎉",
activeColor: Colors.red.withOpacity(0.5),
inactiveColor: const Color.fromARGB(255, 176, 34, 224).withOpacity(0.5),
),
Bubble(
text: "Comedy😂",
activeColor: Colors.red.withOpacity(0.5),
inactiveColor: const Color.fromARGB(255, 89, 37, 245).withOpacity(0.5),
),
Bubble(
text: "Focus🎯",
activeColor: Colors.red.withOpacity(0.5),
inactiveColor: const Color.fromARGB(255, 176, 34, 224).withOpacity(0.5),
),
Bubble(
text: "Music🎶",
activeColor: Colors.red.withOpacity(0.5),
inactiveColor: const Color.fromARGB(255, 89, 37, 245).withOpacity(0.5),
textStyle: const TextStyle(
fontSize: 28,
),
),
Bubble(
text: "Travel🚗",
activeColor: Colors.red.withOpacity(0.5),
inactiveColor: const Color.fromARGB(255, 176, 34, 224).withOpacity(0.5),
),
Bubble(
text: "Sports🏀",
activeColor: Colors.red.withOpacity(0.5),
inactiveColor: const Color.fromARGB(255, 89, 37, 245).withOpacity(0.5),
textStyle: const TextStyle(
fontSize: 24,
),
),
Bubble(
text: "News📰",
activeColor: Colors.red.withOpacity(0.5),
inactiveColor: const Color.fromARGB(255, 176, 34, 224).withOpacity(0.5),
),
],
selectedBubbles: selectedBubbles,
size: const Size(
900,
300,
),
onSelect: (bubble) {
setState(() {
selectedBubbles.add(bubble);
});
},
onRemoved: (bubble) {
setState(() {
selectedBubbles.remove(bubble);
});
},
),
const Spacer(),
Wrap(
children: selectedBubbles
.map<Widget>(
(bubble) => Padding(
padding: const EdgeInsets.all(8.0),
child: Chip(
label: Text(
bubble.text,
style: const TextStyle(
fontSize: 18,
),
),
),
),
)
.toList(),
),
const Spacer(),
],
),
);
}
}更多关于Flutter气泡选择插件bubbles_selection的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter气泡选择插件bubbles_selection的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
bubbles_selection 是一个用于 Flutter 的气泡选择插件，它允许用户通过点击气泡来进行选择。这个插件通常用于需要用户从一组选项中进行选择的场景，比如标签选择、兴趣选择等。
安装
首先，你需要在 pubspec.yaml 文件中添加 bubbles_selection 依赖：
dependencies:
flutter:
sdk: flutter
bubbles_selection: ^1.0.0 # 请检查最新版本
然后运行 flutter pub get 来安装依赖。
基本用法
以下是一个简单的示例，展示了如何使用 bubbles_selection 插件：
import 'package:flutter/material.dart';
import 'package:bubbles_selection/bubbles_selection.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Bubbles Selection Example'),
),
body: Center(
child: BubblesSelectionExample(),
),
),
);
}
}
class BubblesSelectionExample extends StatefulWidget {
[@override](/user/override)
_BubblesSelectionExampleState createState() => _BubblesSelectionExampleState();
}
class _BubblesSelectionExampleState extends State<BubblesSelectionExample> {
List<String> items = ['Flutter', 'Dart', 'Firebase', 'Android', 'iOS', 'Web'];
List<String> selectedItems = [];
[@override](/user/override)
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BubblesSelection(
items: items,
selectedItems: selectedItems,
onSelect: (item) {
setState(() {
if (selectedItems.contains(item)) {
selectedItems.remove(item);
} else {
selectedItems.add(item);
}
});
},
bubbleBuilder: (item, isSelected) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: isSelected ? Colors.blue : Colors.grey[300],
borderRadius: BorderRadius.circular(20),
),
child: Text(
item,
style: TextStyle(
color: isSelected ? Colors.white : Colors.black,
),
),
);
},
),
SizedBox(height: 20),
Text('Selected Items: ${selectedItems.join(', ')}'),
],
);
}
}