Bubble Picker #

A customizable and interactive bubble picker widget for Flutter. This widget displays a collection of bubbles that are attracted to a central point while repelling each other. Users can interact with the bubbles by tapping or dragging them around.

Table of Contents #

• Bubble Picker
  • Features
  • Installation
  • Usage
  • Customization
    • BubbleData Properties
  • Contributions
  • License

Features #

• Interactive Bubbles: Bubbles can be dragged, tapped, and will respond to user interactions.
• Customizable Appearance: Customize the color, size, image, and gradient of each bubble.
• Dynamic Animations: Bubbles smoothly animate towards a central point and repel each other.
• Flexible Configuration: Define bubbles with child widgets, images, and custom behaviors.

Installation #

Add the following to your pubspec.yaml:

dependencies:
  bubble_picker: ^1.0.0

Then run:

  flutter pub get

Usage #

Import the BubblePicker widget into your Dart file:

  import 'package:bubble_picker/bubble_picker.dart';

Create a BubblePicker widget:

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,
    ),
    // Add more bubbles here
  ],
)

Example #

Import the BubblePicker widget into your Dart file:

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'),
              ),
              BubbleData(
                imageProvider: AssetImage('assets/bubble_image.png'),
                radius: 0.2,
              ),
              // Add more bubbles here
            ],
          ),
        ),
      ),
    );
  }
}

Customization #

BubbleData Properties #

• color: The background color of the bubble.
• radius: The radius of the bubble as a fraction of the widget's height.
• child: A widget to be displayed at the center of the bubble.
• onTapBubble: A callback that is triggered when the bubble is tapped.
• imageProvider: An image to be used as the background of the bubble.
• colorFilter: A color filter applied to the background image.
• boxFit: How the background image should be inscribed into the bubble.
• gradient: A gradient to be used as the background of the bubble.

Contributions #

Contributions are welcome! If you find any issues or have suggestions, feel free to open an issue or submit a pull request.

License #

This project is licensed under the MIT License - see the LICENSE file for details.