Flutter气泡选择器插件bubble_picker的使用

发布于 1周前 作者 yuanlaile 来自 Flutter

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

1 回复

更多关于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,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释:

  1. 依赖添加:确保在pubspec.yaml中添加bubble_picker依赖。

  2. 主函数:创建一个简单的Flutter应用,并在首页使用BubblePickerExample组件。

  3. 数据准备:准备一个包含多个选项的items列表,以及一个存储选中项索引的selectedItems列表。

  4. UI构建

    • 使用Column布局来排列文本和选中的芯片(Chip)。
    • 使用Wrap组件来动态显示选中的芯片,并允许删除。
    • 使用BubblePicker组件来创建气泡选择器,并设置相关回调。
  5. 事件处理

    • onSelected:当用户选择一个项时,将该项的索引添加到selectedItems列表中。
    • onDeselected:当用户取消选择一个项时,从selectedItems列表中移除该项的索引。

运行上述代码后,你应该能够看到一个简单的气泡选择器示例,可以选择和取消选择项,并在界面上显示选中的项。

请根据你的实际需求调整代码,例如修改样式、处理更多选项等。

回到顶部