Repository files navigation

• Generate blob in any size

• Control the randomness and complexity

• Animate the blob

• Set ID for a fixed blob

• Shuffle between the fixed blobs

• Loop animation

• Blob clipper

• Get SVG path

• Debug, Child widget, controller and few more

Blobs App
https://lokesh-coder.github.io/blobs.app

• Widgets

• Clipper

• Service

• Inspirations

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

   

Size of the blob (mandatory).

Blob.random(size:200),

edgesCount is the nodes count. More the value, more the complexity. Minimum is3 and max is300. But for cool shapes you can stick between3-20. Default is7

minGrowth is the minimum size of the blob. Smaller the value, more the randomness. Value should be an interger between2-9. Default is4.

Blob.random( size:200, edgesCount:5, minGrowth:4,),

You can useBlobController, if you want to change the shape programatically. As o now it has only one method calledchange(). When you call this, the shape will be changed and returns some useful info of the blob (BlobData).

BlobController blobCtrl=BlobController();

Blob.random( size:200, edgesCount:5, minGrowth:4, controller: blobCtrl,),

BlobData blobData= blobCtrl.change();

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 theblobData from the controller'schange() method. Or you can also generate blobs and get ID fromhttps://blobs.app/

ID looks like5-6-43178

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 usingBlobStyles()

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))

You can usechild property to display a child which looks like the blob as background.

Blob.random( size:200, child:Text('I am a child!'),),

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 is500 milliseconds.

When you want to change the shapes automatically you can setloop property to true.

Blob.animatedRandom( size:200, edgesCount:5, minGrowth:4, loop:true,),

If you useloop inBlob.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 setdebug 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 useBlobClipper(). You can either provideid oredgesCount andminGrowth options.

Container( child:ClipPath(  clipper:BlobClipper(<OPTIONS>),  child:Image.network("https://bit.ly/2nirIxg"), ),)

Blobs shape are created byBlobGenerator(). Both widgets and clipper uses this internally to create the shape and then it is painted to canvas. This will returnBlobData.

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,)

BlobData containssvgPath info. It is just a path string which will look like this,

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

from this you can easily create SVG like

<svgviewBox="0 0 400 400"xmlns="http://www.w3.org/2000/svg"> <pathfill="#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.

Any kind of contributions are welcome :)

For any issues and suggestions please create aissue card in Github repository