{"id":13491401,"url":"https://github.com/lokesh-coder/flutter_blobs","last_synced_at":"2025-07-14T11:11:47.263Z","repository":{"id":49535574,"uuid":"264075561","full_name":"lokesh-coder/flutter_blobs","owner":"lokesh-coder","description":"Generate Blob shapes for flutter apps","archived":false,"fork":false,"pushed_at":"2024-02-06T14:05:15.000Z","size":21246,"stargazers_count":131,"open_issues_count":12,"forks_count":24,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T07:57:39.369Z","etag":null,"topics":["blobs","clipper","dart","flutter","package","shapes"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/blobs","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lokesh-coder.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2020-05-15T02:24:16.000Z","updated_at":"2025-03-05T00:37:45.000Z","dependencies_parsed_at":"2024-03-13T15:44:45.210Z","dependency_job_id":null,"html_url":"https://github.com/lokesh-coder/flutter_blobs","commit_stats":{"total_commits":15,"total_committers":4,"mean_commits":3.75,"dds":0.2666666666666667,"last_synced_commit":"80d8a4136a71275be8278a2c7666c8416b55cbe2"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lokesh-coder%2Fflutter_blobs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lokesh-coder%2Fflutter_blobs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lokesh-coder%2Fflutter_blobs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lokesh-coder%2Fflutter_blobs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lokesh-coder","download_url":"https://codeload.github.com/lokesh-coder/flutter_blobs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246927835,"owners_count":20856198,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["blobs","clipper","dart","flutter","package","shapes"],"created_at":"2024-07-31T19:00:56.716Z","updated_at":"2025-04-03T03:11:01.347Z","avatar_url":"https://github.com/lokesh-coder.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"\u003ch3  align=\"center\"\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://user-images.githubusercontent.com/1754676/82777559-18537280-9e6c-11ea-9257-0a24645c91b0.png\"  alt=\"Blobs\"\u003e\u003c/p\u003e\n\n\u003c/h3\u003e\n\n\u003ch4  align=\"center\"\u003eCreate beautiful blob shapes with minimal code. \u003c/h4\u003e\n\n### Features\n\n- Generate blob in any size\n\n- Control the randomness and complexity\n\n- Animate the blob\n\n- Set ID for a fixed blob\n\n- Shuffle between the fixed blobs\n\n- Loop animation\n\n- Blob clipper\n\n- Get SVG path\n\n- Debug, Child widget, controller and few more\n\n\u0026nbsp;\n\n\u003cdiv class=\"highlight highlight-source-shell\"\u003e\n\u003cpre\u003e\n\u003cdiv align=\"center\"\u003e\u003cstrong \u003eBlobs App\u003c/strong\u003e\u003c/div\u003e\n\u003cdiv align=\"center\"\u003e\u003ca align=\"center\" href=\"https://lokesh-coder.github.io/blobs.app\"\u003ehttps://lokesh-coder.github.io/blobs.app\u003c/a\u003e\u003c/div\u003e\n\u003c/pre\u003e\n\u003c/div\u003e\n\n\u0026nbsp;\n\n### Contents\n\n- [Widgets](#widgets)\n\n- [Clipper](#clipper)\n\n- [Service](#service)\n\n- [Inspirations](#inspirations)\n\n\u0026nbsp;\n\n### Widgets\n\nThere are four widgets,\n\n- `Blob.random()` - Generate random blobs\n\n- `Blob.animatedRandom()` - Generate blobs and animate the shape change\n\n- `Blob.fromID()` - Use one or more ID's for fixed blobs\n\n- `Blob.animatedFromID()` - Animate the shape change\n\n  \u0026nbsp;\n\n\u003cimg width=\"200\" alt=\"basic_blobs\" src=\"https://user-images.githubusercontent.com/1754676/82777156-eee61700-9e6a-11ea-9834-18882991056b.png\"\u003e\n\n\u0026nbsp;\n\n#### ⚙️ Blob Size\n\nSize of the blob (_mandatory_).\n\n```dart\n\nBlob.random(size:200),\n\n```\n\n\u0026nbsp;\n\n#### ⚙️ Customise shape\n\n`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_\n\n`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_.\n\n```dart\n\nBlob.random(\n size:200,\n edgesCount:5,\n minGrowth:4,\n),\n\n```\n\n\u0026nbsp;\n\n#### ⚙️ Controller\n\nYou 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`).\n\n```dart\n\nBlobController blobCtrl =  BlobController();\n\n```\n\n```dart\n\nBlob.random(\n size:200,\n edgesCount:5,\n minGrowth:4,\n controller: blobCtrl,\n),\n\n```\n\n```dart\n\nBlobData blobData = blobCtrl.change();\n\n```\n\n\u0026nbsp;\n\n#### ⚙️ Fixed shapes\n\nIn 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.\n\nYou 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/](https://blobs.app/)\n\nID looks like **`5-6-43178`**\n\n`id` option accepts one or multiple id's. If it has only one id, then it will be a fixed blob.\n\n```dart\n\nBlob.fromID(\n size:200,\n id:['X-Y-ZZZZ'],\n controller: blobCtrl,\n),\n\n```\n\nIf you provide multiple id's, then it will show each one in order on changing.\n\n```dart\n\nBlob.fromID(\n size:200,\n id:['X-Y-ZZZZ','X-Y-ZZZZ','X-Y-ZZZZ'],\n controller: blobCtrl\n),\n\n```\n\n\u0026nbsp;\n\n#### ⚙️ Styles\n\nYou can change the color, add gradient, make outlined using `BlobStyles()`\n\n```dart\n\nBlob.random(\n size:200,\n styles:  BlobStyles(\n   color:  Colors.green,\n   fillType:  BlobFillType.stroke,\n   gradient:  LinearGradient(),\n   strokeWidth:3,\n ),\n),\n\n```\n\nGradient can be Linear or Radial. `LinearGradient` will look like this,\n\n```dart\n\nLinearGradient(colors: [Colors.red, Colors.green])\n.createShader(Rect.fromLTRB(0, 0, 300, 300))\n\n```\n\n\u003cp float=\"left\"\u003e\n  \u003cimg width=\"200\" alt=\"style_gradient\" src=\"https://user-images.githubusercontent.com/1754676/82777164-f1e10780-9e6a-11ea-8d02-89217cd6e582.png\"\u003e\n  \u003cimg width=\"200\" alt=\"style_custom_color\" src=\"https://user-images.githubusercontent.com/1754676/82777162-f1e10780-9e6a-11ea-82ec-577210004e11.png\"\u003e\n  \u003cimg width=\"200\" alt=\"style_outline\" src=\"https://user-images.githubusercontent.com/1754676/82777165-f2799e00-9e6a-11ea-9166-3c4b5e0a82db.png\"\u003e\n\u003c/p\u003e\n\n\u0026nbsp;\n\n#### ⚙️ Child Widget\n\nYou can use `child` property to display a child which looks like the blob as background.\n\n```dart\n\nBlob.random(\n size:200,\n child:  Text('I am a child!'),\n),\n\n```\n\n\u003cimg width=\"200\" alt=\"blobs_with_child\" src=\"https://user-images.githubusercontent.com/1754676/82777157-ef7ead80-9e6a-11ea-9b74-6224cf33d739.png\"\u003e\n\n\u0026nbsp;\n\n#### ⚙️ Animating the blobs\n\nWhenever the blobs are changing, this widget will animate the shape change.\n\n```dart\n\nBlob.animatedRandom(\n size:200,\n edgesCount:5,\n minGrowth:4,\n duration:  Duration(milliseconds:500),\n),\n\n```\n\n`duration` is optional. Default is `500` milliseconds.\n\n![animated_basic](https://user-images.githubusercontent.com/1754676/82777008-6ebfb180-9e6a-11ea-9b85-fcac09cfca38.gif)\n\n\u0026nbsp;\n\n#### ⚙️ Change shapes automatically\n\nWhen you want to change the shapes automatically you can set `loop` property to true.\n\n```dart\n\nBlob.animatedRandom(\n size:200,\n edgesCount:5,\n minGrowth:4,\n loop:  true,\n),\n\n```\n\n\u0026nbsp;\n\n#### ⚙️ Animate Fixed shapes\n\nIf you use `loop` in `Blob.fromAnimatedID()` widget, it will change shapes within the provided blobs.\n\n```dart\n\nBlob.animatedFromID(\n size:200,\n id:['X-Y-ZZZZ','X-Y-ZZZZ','X-Y-ZZZZ'],\n loop:  true,\n),\n\n```\n\n![animated_fixed_blobs](https://user-images.githubusercontent.com/1754676/82777014-741cfc00-9e6a-11ea-8e75-80849b8dbf3b.gif)\n\n\u0026nbsp;\n\n#### ⚙️ Debug\n\nWhen you set `debug` to true, it will show you circles and lines that connect the blob points.\n\n```dart\n\nBlob.random(\n size:200,\n debug:  true,\n),\n\n```\n\n\u003cimg width=\"200\" alt=\"debug_blob\" src=\"https://user-images.githubusercontent.com/1754676/82777158-f0afda80-9e6a-11ea-8dbf-84d774c42215.png\"\u003e\n\n\u0026nbsp;\n\n### Clipper\n\nSometime 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.\n\n```dart\n\nContainer(\n child:  ClipPath(\n  clipper: BlobClipper(\u003cOPTIONS\u003e),\n  child: Image.network(\"https://bit.ly/2nirIxg\"),\n ),\n)\n\n```\n\n![clipper](https://user-images.githubusercontent.com/1754676/82777018-75e6bf80-9e6a-11ea-913d-873e9ba4444c.gif)\n\n\u0026nbsp;\n\n### Service\n\nBlobs 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`.\n\n```dart\n\nBlobData blobData =  BlobGenerator(\n edgesCount:  7,\n minGrowth:  4,\n size:  Size(30, 30),\n id:  null,\n).generate();\n\n```\n\n\u0026nbsp;\n\n#### ℹ️ BlobData\n\nIt is the raw data, which contains the path definitions, coordinates and other basic info about the blob.\n\n```dart\n\nBlobData(\n dots,\n innerRad,\n svgPath,\n coords,\n id,\n edgesCount,\n minGrowth,\n size,\n originalSize,\n)\n\n```\n\n\u0026nbsp;\n\n#### 📐SVG\n\nBlobData contains `svgPath` info. It is just a path string which will look like this,\n\n`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`\n\nfrom this you can easily create SVG like\n\n```svg\n\n\u003csvg viewBox=\"0 0 400 400\" xmlns=\"http://www.w3.org/2000/svg\"\u003e\n \u003cpath 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\" /\u003e\n\u003c/svg\u003e\n\n```\n\n### Inspirations\n\nWe can create cool visual elements with blobs. Here's a few things that came to my mind.\n\n![ins#1](https://user-images.githubusercontent.com/1754676/82777020-767f5600-9e6a-11ea-9e3a-7fae7c47e595.gif)\n\u003cimg width=\"200\" alt=\"ins#2\" src=\"https://user-images.githubusercontent.com/1754676/82777161-f1487100-9e6a-11ea-8364-3f8de4849bfd.png\"\u003e\n\u003cimg width=\"200\" alt=\"#ins3\" src=\"https://user-images.githubusercontent.com/1754676/82777152-eb529000-9e6a-11ea-923f-2df50eb0fa61.png\"\u003e\n\n### License\n\nThis project is licensed under MIT.\n\n### Contribution and issue\n\nAny kind of contributions are welcome :)\n\nFor any issues and suggestions please create a [issue card](https://github.com/lokesh-coder/flutter_blobs/issues/new) in Github repository\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flokesh-coder%2Fflutter_blobs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flokesh-coder%2Fflutter_blobs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flokesh-coder%2Fflutter_blobs/lists"}