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
Contents
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…
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.
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.
Top comments (1)
Thanks, I am so glad to hear that