Create beautiful blobs - fixed/random blob generation, animations, svgs and more
Create beautiful blob shapes with minimal code.
Generate blob in any size
Control the randomness and complexity
Animate the blob
Set ID for a fixed blob
Shuffle between the fixed blobs
Get SVG path
Debug, Child widget, controller and few more
There are four widgets,
Blob.random()- Generate random blobs
Blob.animatedRandom()- Generate blobs and animate the shape change
Blob.fromID()- Use one or more ID's for fixed blobs
Blob.animatedFromID()- Animate the shape change
⚙️ Blob Size
Size of the blob (mandatory).
⚙️ Customise shape
edgesCount is the nodes count. More the value, more the complexity. Minimum is 3 and max is 300. But for cool shapes you can stick between 3-20. Default is 7
minGrowth is the minimum size of the blob. Smaller the value, more the randomness. Value should be an interger between 2-9. Default is 4.
Blob.random( size:200, edgesCount:5, minGrowth:4, ),
You can use
BlobController, if you want to change the shape programatically. As o now it has only one method called
change(). When you call this, the shape will be changed and returns some useful info of the blob (
BlobConroller blobCtrl = BlobController();
Blob.random( size:200, edgesCount:5, minGrowth:4, controller: blobCtrl, ),
BlobData blobData = blobCtrl.change();
⚙️ Fixed shapes
In most scenarios you wanted a same blob to be rendered every time. This can be achieved using ID. It is just a plain string contains the shape data.
You can get the ID from the
blobData from the controller's
change() method. Or you can also generate blobs and get ID from https://blobs.app/
ID looks like
id option accepts one or multiple id's. If it has only one id, then it will be a fixed blob.
Blob.fromID( size:200, id:['X-Y-ZZZZ'], controller: blobCtrl, ),
If you provide multiple id's, then it will show each one in order on changing.
Blob.fromID( size:200, id:['X-Y-ZZZZ','X-Y-ZZZZ','X-Y-ZZZZ'], controller: blobCtrl ),
You can change the color, add gradient, make outlined using
Blob.random( size:200, styles: BlobStyles( color: Colors.green, fillType: BlobFillType.stroke, gradient: LinearGradient(), strokeWidth:3, ), ),
Gradient can be Linear or Radial.
LinearGradient will look like this,
LinearGradient(colors: [Colors.red, Colors.green]) .createShader(Rect.fromLTRB(0, 0, 300, 300))
⚙️ Child Widget
You can use
child property to display a child which looks like the blob as background.
Blob.random( size:200, child: Text('I am a child!'), ),
⚙️ Animating the blobs
Whenever the blobs are changing, this widget will animate the shape change.
Blob.animatedRandom( size:200, edgesCount:5, minGrowth:4, duration: Duration(milliseconds:500), ),
duration is optional. Default is
⚙️ Change shapes automatically
When you want to change the shapes automatically you can set
loop property to true.
Blob.animatedRandom( size:200, edgesCount:5, minGrowth:4, loop: true, ),
⚙️ Animate Fixed shapes
If you use
Blob.fromAnimatedID() widget, it will change shapes within the provided blobs.
Blob.animatedFromID( size:200, id:['X-Y-ZZZZ','X-Y-ZZZZ','X-Y-ZZZZ'], loop: true, ),
When you set
debug to true, it will show you circles and lines that connect the blob points.
Blob.random( size:200, debug: true, ),
Sometime you might want to clip the widget by blob shape. In such cases you can use
BlobClipper(). You can either provide
Container( child: ClipPath( clipper: BlobClipper(<OPTIONS>), child: Image.network("https://bit.ly/2nirIxg"), ), )
Blobs shape are created by
BlobGenerator(). Both widgets and clipper uses this internally to create the shape and then it is painted to canvas. This will return
BlobData blobData = BlobGenerator( edgesCount: 7, minGrowth: 4, size: Size(30, 30), id: null, ).generate();
It is the raw data, which contains the path definitions, coordinates and other basic info about the blob.
BlobData( dots, innerRad, svgPath, coords, id, edgesCount, minGrowth, size, originalSize, )
svgPath info. It is just a path string which will look like this,
from this you can easily create SVG like
<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"> <path fill="#474787" d="M326.0,251.5Q282.0,303.0,226.5,315.0Q171.0,327.0,118.5,296.0Q66.0,265.0,90.0,211.5Q114.0,158.0,145.0,126.0Q176.0,94.0,228.5,96.0Q281.0,98.0,325.5,149.0Q370.0,200.0,326.0,251.5Z" /> </svg>
We can create cool visual elements with blobs. Here's a few things that came to my mind.
This project is licensed under MIT.
Contribution and issue #
Any kind of contributions are welcome :)
For any issues and suggestions please create a issue card in Github repository