floating_bubbles 2.1.0
floating_bubbles: ^2.1.0 copied to clipboard

A Flutter Package for adding Floating bubbles on the Foreground to any Flutter widget.

Floating Bubbles Build Status #

pub version

A Flutter Package for adding Floating bubbles in the Foreground to a widget. #

Getting Started #

In your flutter project(in pubspec.yaml) add the dependency:

dependencies:
   floating_bubbles: ^2.1.0

Import the package:

import 'package:floating_bubbles/floating_bubbles.dart';

Usage #

Here is an snippet on how to use Floating Bubbles to any Widget.

Creating FloatingBubbles() (this creates the animation and plays for amount of time you give as the duration.) #

 return Stack(
    children: [
     Positioned.fill(
        child: Container(
        color: Colors.red,
      ),
     ),
     Positioned.fill(
         child: FloatingBubbles(
         noOfBubbles: 25,
         colorOfBubbles: Colors.green.withAlpha(30),
         sizeFactor: 0.16,
         duration: 120, // 120 seconds. 
         opacity: 70,
         paintingStyle: PaintingStyle.stroke,
         strokeWidth: 8,
         shape: BubbleShape.circle, // circle is the default. No need to explicitly mention if its a circle.
    ),
 );

Creating FloatingBubbles.alwaysRepeating() (Creates Floating Bubbles that always floats and doesn't stop.) #

 return Stack(
    children: [
     Positioned.fill(
        child: Container(
        color: Colors.red,
      ),
     ),
     Positioned.fill(
         child: FloatingBubbles.alwaysRepeating(
         noOfBubbles: 25,
         colorOfBubbles: Colors.green.withAlpha(30),
         sizeFactor: 0.16,
         opacity: 70,
         paintingStyle: PaintingStyle.fill,
         shape: BubbleShape.square,
    ),
 );

Parameters: #

For Creating FloatingBubbles() #

NameDescriptionIs It RequiredDefault Value
noOfBubblesNo. of Bubbles to be present in the screen at a given TimeYes-
colorOfBubblesColor of the bubblesYes-
sizeFactorSize Factor of each bubblesYes-
durationDuration to play the animation (input is taken as seconds)Yes-
opacityOpacity of the bubblesNo60
paintingStylePainting Style of the bubbles.NoPaintingStyle.fill
strokeWidthStroke Width of the bubbles. This value is effective only if Painting Style is set to PaintingStyle.stroke.No0
shapeShape of the bubbles.NoBubbleShape.circle

For Creating FloatingBubbles.alwaysRepeating() #

NameDescriptionIs It RequiredDefault Value
noOfBubblesNo. of Bubbles to be present in the screen at a given TimeYes-
colorOfBubblesColor of the bubblesYes-
sizeFactorSize Factor of each bubblesYes-
opacityOpacity of the bubblesNo60
paintingStylePainting Style of the bubbles.NoPaintingStyle.fill
strokeWidthStroke Width of the bubbles. This value is effective only if Painting Style is set to PaintingStyle.stroke.No0
shapeShape of the bubbles.NoBubbleShape.circle

Example #

The code for the Example shown below is here.


As the Gifs here are converted from mp4, there are some stutters. To see the MP4 format of these Gifs Click Here.

Platforms on which this package was tested. #

PlatformSupportedComments
AndroidYesWorks without any issues
IOSYesWorks without any issues
WebYes (kinda)Works when using web renderer engine as html. use the command flutter run -d chrome --web-renderer html / flutter build web --web-renderer html
WindowsYesWorks without any issues
LinuxNot yet tested-
MacOSNot yet tested-

Stress Test #

Stress Test has been done on this package. Below is the information(fps) on how the performance of the package when the animation was coupled with a heavy rive animation.

Average FPS of the UI when the package was stress tested on a low-end Android Phone #

APP build in Debug Mode

APP build in Release Mode


Average FPS of the UI when the package was stress tested on a High-end Android Phone #

APP build in Release Mode

Performance improvements will be made in the coming updates to make this package more suitable for low end devices. If you have any suggestions or ideas, just pull request :)


About Me #

Support #

Give a ⭐/👍 if you liked the work!! :) Suggestions are Welcome. Any issues just open an issue in Github. I will reach you as soon as possible.

License #

The Scripts and Documentation in this project are released under the MIT License

16
likes
130
pub points
57%
popularity

Publisher

Unknown

A Flutter Package for adding Floating bubbles on the Foreground to any Flutter widget.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter, simple_animations

More

Packages that depend on floating_bubbles