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