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
