๐Ÿซง Bubbles Selection

Add ๐Ÿ˜ not-so boring ๐Ÿซง bubbles selection to your app.

https://user-images.githubusercontent.com/65209850/188316726-583cc23f-f706-4298-ad92-1d7da26b62d6.mp4

Check the demo here

โœจ Features

  • Fully customizable bubbles
  • Fully customizable bubble text
  • Interactive bubbles with collision system
  • Flexible API
  • Fun to interact with

๐Ÿš€ Getting started

You can add bubble selection like this,

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) {
              //  logic on bubble selection
            },
            onRemoved: (bubble) {
              //  logic when bubble is un-selected
            },
          )

๐Ÿ“ TODO

  • Improve positioning of bubbles initially to avoid any possible overlapping between bubbles
  • Additional constraints to avoid bubbles whose sizes might be larger than the size of the bubbles selection box
  • Api imrpovements around letting user know of selected and un-selected bubbles


Warning This is a dev release. Meaning, things may change/break more often than usual untill a stable release.

Libraries

bubbles_selection