Repository files navigation

Blobs can be created from widgets, clippers and services.

• Generate blob in any size
• Control the edges and complexity
• Animate the blob
• Set hash ID for a fixed blob
• Shuffle between the fixed blobs
• Loop animation
• Custom clipper
• Get SVG path
• Debug, child, controller and few more

• Widgets
• Clipper
• Service

There are four widgets,

• Blob.random() - Generate random blobs
• Blob.animatedRandom() - Generate blobs and animate the shape change
• Blob.fromHash() - Use one or more hash ID's for fixed blobs
• Blob.animatedFromHash() - Animate the shape change

Blobs and animations are configurable.

Blob Size

Size of the blob. It is mandatory.

Blob.random(size:200),

Blob shape settings

edgesCount is the nodes count. Minimum is3 and max is300. But for cool shapes you can stick between3-20. Default is7minGrowth is the minimum size of the blob. Value should be an interger between2-9. Default is4.

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

Controller

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

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 loaded every time. This can be achieved using hash. Hash is just a ID, which contains the shape data. You can get the hash id from theblobData from the controller'schange() method.

Blobs app is in progress. Once it is ready, you will be able to generate and get the hash ID from that app.

Hash id looks likeH4sIANhSwV4A/w3LsQ0AMQgEwYY24A5koBbr+2/jnY40NzdxBD7GPagXrznzKKlFbjSBJDKKs9QLE98PNkNQxj0AAAA=

hash option accepts one or multiple id's. If it has only one hash, then it will be a fixed blob.

Blob.fromHash(  size:200,  hash:['XXXXXXXX...'],  controller: blobCtrl),

If you provide multiple id's, then it will show each one in order on changing.

Blob.fromHash(  size:200,  hash:['XXXXXXXX...','YYYYYYY....','ZZZZZZZZ....'],  controller: blobCtrl),

Styles

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

Child Widget

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

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

Change shapes automatically

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

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

Animate Fixed shapes

If you useloop inBlob.fromAnimatedHash() widget, it will change shapes within the provided blobs.

Blob.animatedFromHash(  size:200,  hash:['XXXXXXXX...','YYYYYYY....','ZZZZZZZZ....'],  loop:true,),

Debug

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 providehash oredgesCount andminGrowth options.

Container(child:ClipPath(        clipper:BlobClipper(<OPTIONS>),        child:newImage.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),  hash:null,).generate();

BlobData

It is the raw data, which contains the path definitions, coordinates and other basic info about the blob.

BlobData(  dots,  innerRad,  svgPath,  coords,  hash,  edgesCount,  minGrowth,  size,  originalSize,)

SVG

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>