Add fancy blobs to your flutter apps

by Flutter Awesome

Blob Flutter package

Add fancy blobs to your flutter apps. You can now imagine many usage of blobs into your app (button, loader, background…).

Features

  • blob layout
  • blob button
  • customize your blob as you want

Roadmap

  • improve documentation
  • migrate shader to umbra
  • shader: wait for flutter glsl int / array support
  • shader: wait for flutter glsl output support
  • shader: create a gradient version
  • button: add push effects
  • button: provide custom method to let user create it’s own on push effects

Getting started

install the flutter_blob package.

Usage

Layout

BlobLayout.from(
    blobs: myBlobsList,
    blobsColor: Colors.blue,
)

or using the builder function (recommended)

BlobLayout.builder(
    builder: (Size areaSize) => [
        RotatingParticle.random(area),
        RotatingParticle.random(area),
        RotatingParticle.random(area),
        RotatingParticle.random(area),
        RotatingParticle.random(area),
        RotatingParticle.random(area),
        RotatingParticle.random(area),
        RotatingParticle.random(area),
    ],
    blobsColor: Colors.blue,
)

You must provide exactly 8 blob This is due to a current limitation of the flutter shader support

An example is available in the example folder of this repository.

Button

For now buttons only support icon.

BlobButton.bouncing(
    onTap: () => print("do w/e you want"),
    backgroundColor: Colors.amber[900],
    icon: Icon(
        Icons.add,
        color: Colors.white,
        size: 32,
    ),
)

You must provide exactly 8 blob This is due to a current limitation of the flutter shader support

An example is available in the example folder of this repository.

Customize

The blob is generated using multiple particles that attracts each others. A shader calculate the energy between those particles for each pixel of a canvas.

You can customize your blob effects combining 8 particles.

The is 3 types of particles available in this package (feel free to create yours or suggest some ?)

  • BasicParticle (randomly goes on one way and when touch a border bounce to the other side)
  • EjectedParticle (Generated on the center and randomly goes out. Once it touch a border, it’s generated on the center again)
  • RotatingParticle (randomly move in a circle around the center.)

How it works

// coming soon

Additional information

  • ? contributions or ideas accepted
  • ? I made this package learning how shaders works. I’m always open to learn new things. Don’t hesitate suggesting any improvement, I love it.

Social

You can reach me on: @mcflyDev on twitter

GitHub

View Github