Description:

flutter blob

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,
)
copied to clipboard
or using the builder function (recommended)
BlobLayout.builder(
builder: (Size areaSize) => [
RotatingBloB.random(area),
RotatingBloB.random(area),
RotatingBloB.random(area),
RotatingBloB.random(area),
RotatingBloB.random(area),
RotatingBloB.random(area),
RotatingBloB.random(area),
RotatingBloB.random(area),
],
blobsColor: Colors.blue,
)
copied to clipboard

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,
),
)
copied to clipboard

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

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter