blobs 2.0.0

Create beautiful blobs - fixed/random blob generation, animations, svgs and more

Create beautiful blob shapes with minimal code.

Features

• 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://blobs.app/

copied to clipboard

Contents

• Widgets

• Clipper

• Service

• Inspirations

Widgets

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

Blob.random(size:200),

copied to clipboard

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

copied to clipboard

⚙️ Controller

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 (BlobData).

BlobController blobCtrl =  BlobController();

copied to clipboard

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

copied to clipboard

BlobData blobData = blobCtrl.change();

copied to clipboard

⚙️ 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 5-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,
),

copied to clipboard

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

copied to clipboard

⚙️ Styles

You can change the color, add gradient, make outlined using BlobStyles()

Blob.random(
 size:200,
 styles:  BlobStyles(
   color:  Colors.green,
   fillType:  BlobFillType.stroke,
   gradient:  LinearGradient(),
   strokeWidth:3,
 ),
),

copied to clipboard

Gradient can be Linear or Radial. LinearGradient will look like this,

LinearGradient(colors: [Colors.red, Colors.green])
.createShader(Rect.fromLTRB(0, 0, 300, 300))

copied to clipboard

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

copied to clipboard

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

copied to clipboard

duration is optional. Default is 500 milliseconds.

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

copied to clipboard

⚙️ Animate Fixed shapes

If you use loop in 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,
),

copied to clipboard

⚙️ Debug

When you set debug to true, it will show you circles and lines that connect the blob points.

Blob.random(
 size:200,
 debug:  true,
),

copied to clipboard

Clipper

Sometime you might want to clip the widget by blob shape. In such cases you can use BlobClipper(). You can either provide id or edgesCount and minGrowth options.

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

copied to clipboard

Service

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 blobData =  BlobGenerator(
 edgesCount:  7,
 minGrowth:  4,
 size:  Size(30, 30),
 id:  null,
).generate();

copied to clipboard

ℹ️ BlobData

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

copied to clipboard

📐SVG

BlobData contains svgPath 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

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

copied to clipboard

Inspirations

We can create cool visual elements with blobs. Here's a few things that came to my mind.

License

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