Generate beautiful blob shapes for web and flutter apps

Lokesh — Thu, 28 May 2020 03:02:44 +0000

Recently I was trying to convert a dribbble shot to a flutter app, and then quickly realised blob shapes in the design is not something easy to bring it in flutter. Initially I started with SVG's from Blobmaker but animation and morphing the path became a pain, because I am beginner and I truly hate anything that involves Math.

So, I decided to create a package that fits to my needs and some common use cases.

Blobs for flutter

flutter_blobs is a tiny package which helps to create and animate blobs shapes. There are quite a few features in it, like clipping, children widgets, gradient background, outlines and couple more. There is no dependencies and it is flexible, as the path can be manipulated easily to create complex shapes.

lokesh-coder / flutter_blobs

Generate Blob shapes for flutter apps

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://lokesh-coder.github.io/blobs.app

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

⚙️ 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…

View on GitHub

Blobs for Web

Random blob shapes are great in some scenarios, but in most cases user always wanted a same blob shape on every render. This is where things got complicated. For that I have to build a web app, where user can generate blob shapes and use it in flutter app with a ID. My first idea was to build a web app with flutter web. But things didn't worked well, as there were lot of challenges like slow initial load, less customisation. So, finally I ported the path generation logic to Javascript and made a simple Blob generation tool using the SVG.

// Detect dark theme var iframe = document.getElementById('tweet-1265664002102824968-974'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1265664002102824968&theme=dark" }

https://blobs.app/

Takeaway

As I mentioned earlier, Math is just a pain for me. But stepping out and learning trigonometry and pseudorandom number generator (PRNG) was a very good experience.

Links

Web app - Blob generator
Flutter package - blobs
Package repo - flutter_blobs

Contribution

I would really like any kind of contribution from the community.

DEV Community: Lokesh