Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lokesh-coder/flutter_blobs
Generate Blob shapes for flutter apps
https://github.com/lokesh-coder/flutter_blobs
blobs clipper dart flutter package shapes
Last synced: 11 days ago
JSON representation
Generate Blob shapes for flutter apps
- Host: GitHub
- URL: https://github.com/lokesh-coder/flutter_blobs
- Owner: lokesh-coder
- License: mit
- Created: 2020-05-15T02:24:16.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-02-06T14:05:15.000Z (9 months ago)
- Last Synced: 2024-10-12T05:44:56.607Z (26 days ago)
- Topics: blobs, clipper, dart, flutter, package, shapes
- Language: Dart
- Homepage: https://pub.dev/packages/blobs
- Size: 20.3 MB
- Stars: 130
- Watchers: 2
- Forks: 22
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- my-awesome-list - flutter_blobs - coder | 132 | (Dart)
README
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
### Contents
- [Widgets](#widgets)
- [Clipper](#clipper)
- [Service](#service)
- [Inspirations](#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_).
```dart
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 the value, more the randomness. Value should be an interger between _2-9_. Default is _4_.
```dart
Blob.random(
size:200,
edgesCount:5,
minGrowth:4,
),
```
#### ⚙️ 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`).
```dart
BlobController blobCtrl = BlobController();
```
```dart
Blob.random(
size:200,
edgesCount:5,
minGrowth:4,
controller: blobCtrl,
),
```
```dart
BlobData blobData = blobCtrl.change();
```
#### ⚙️ 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/](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.
```dart
Blob.fromID(
size:200,
id:['X-Y-ZZZZ'],
controller: blobCtrl,
),
```
If you provide multiple id's, then it will show each one in order on changing.
```dart
Blob.fromID(
size:200,
id:['X-Y-ZZZZ','X-Y-ZZZZ','X-Y-ZZZZ'],
controller: blobCtrl
),
```
#### ⚙️ Styles
You can change the color, add gradient, make outlined using `BlobStyles()`
```dart
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,
```dart
LinearGradient(colors: [Colors.red, Colors.green])
.createShader(Rect.fromLTRB(0, 0, 300, 300))
```
#### ⚙️ Child Widget
You can use `child` property to display a child which looks like the blob as background.
```dart
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.
```dart
Blob.animatedRandom(
size:200,
edgesCount:5,
minGrowth:4,
duration: Duration(milliseconds:500),
),
```
`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.
```dart
Blob.animatedRandom(
size:200,
edgesCount:5,
minGrowth:4,
loop: true,
),
```
#### ⚙️ Animate Fixed shapes
If you use `loop` in `Blob.fromAnimatedID()` widget, it will change shapes within the provided blobs.
```dart
Blob.animatedFromID(
size:200,
id:['X-Y-ZZZZ','X-Y-ZZZZ','X-Y-ZZZZ'],
loop: true,
),
```
#### ⚙️ Debug
When you set `debug` to true, it will show you circles and lines that connect the blob points.
```dart
Blob.random(
size:200,
debug: true,
),
```
### 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.
```dart
Container(
child: ClipPath(
clipper: BlobClipper(),
child: Image.network("https://bit.ly/2nirIxg"),
),
)
```
### 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`.
```dart
BlobData blobData = BlobGenerator(
edgesCount: 7,
minGrowth: 4,
size: Size(30, 30),
id: null,
).generate();
```
#### ℹ️ BlobData
It is the raw data, which contains the path definitions, coordinates and other basic info about the blob.
```dart
BlobData(
dots,
innerRad,
svgPath,
coords,
id,
edgesCount,
minGrowth,
size,
originalSize,
)
```
#### 📐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
```
### 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](https://github.com/lokesh-coder/flutter_blobs/issues/new) in Github repository