A Flutter Package for Adding Floating Bubbles on The Foreground to any Flutter Widget

Getting Started 

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

dependencies:
  floating_bubbles: ^2.6.1

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,
         colorsOfBubbles: [
            Colors.green.withAlpha(30),
            Colors.red,
         ],
         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.
         speed: BubbleSpeed.normal, // normal is the default
    ),
 );

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,
         colorsOfBubbles: [
            Colors.green.withAlpha(30),
            Colors.red,
         ],
        sizeFactor: 0.16,
        opacity: 70,
        paintingStyle: PaintingStyle.fill,
        shape: BubbleShape.square,
        speed: BubbleSpeed.normal,

   ),
);

Parameters: 

For Creating FloatingBubbles() 

For Creating FloatingBubbles.alwaysRepeating() 

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. 

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 

• My Other Works

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

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add floating_bubbles

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  floating_bubbles: ^2.6.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:floating_bubbles/floating_bubbles.dart';

example/lib/main.dart

import 'package:floating_bubbles/floating_bubbles.dart';
import 'package:flutter/material.dart';

import 'fps.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      showPerformanceOverlay: true,
      home: Scaffold(
        body: HomePage(),
      ),
    );
  }
}

// Simple example.
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    eachFrame()
        .take(10000)
        .transform(const ComputeFps())
        // ignore: avoid_print
        .listen((fps) => print('fps: $fps'));
    return Stack(
      children: [
        Positioned.fill(
          child: Container(
            color: Colors.blue,
          ),
        ),
        Positioned.fill(
          child: FloatingBubbles.alwaysRepeating(
            noOfBubbles: 50,
            colorsOfBubbles: const [
              Colors.white,
              Colors.red,
            ],
            sizeFactor: 0.2,
            opacity: 70,
            speed: BubbleSpeed.slow,
            paintingStyle: PaintingStyle.fill,
            shape: BubbleShape.circle, //This is the default
          ),
        ),
      ],
    );
  }
}

Download details:

Author: Poujhit

Source: https://github.com/Poujhit/floating_bubbles

#flutter #android #ios