Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit66b0a68

Browse files
Lokesh rLokesh r
Lokesh r
authored and
Lokesh r
committed
chore: initial commit
0 parents  commit66b0a68

File tree

107 files changed

+3883
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

107 files changed

+3883
-0
lines changed

‎.gitignore‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Miscellaneous
2+
*.class
3+
*.log
4+
*.pyc
5+
*.swp
6+
.DS_Store
7+
.atom/
8+
.buildlog/
9+
.history
10+
.svn/
11+
12+
# IntelliJ related
13+
*.iml
14+
*.ipr
15+
*.iws
16+
.idea/
17+
18+
# The .vscode folder contains launch configuration and tasks you configure in
19+
# VS Code which you may wish to be included in version control, so this line
20+
# is commented out by default.
21+
#.vscode/
22+
23+
# Flutter/Dart/Pub related
24+
**/doc/api/
25+
.dart_tool/
26+
.flutter-plugins
27+
.flutter-plugins-dependencies
28+
.packages
29+
.pub-cache/
30+
.pub/
31+
build/
32+
33+
# Android related
34+
**/android/**/gradle-wrapper.jar
35+
**/android/.gradle
36+
**/android/captures/
37+
**/android/gradlew
38+
**/android/gradlew.bat
39+
**/android/local.properties
40+
**/android/**/GeneratedPluginRegistrant.java
41+
42+
# iOS/XCode related
43+
**/ios/**/*.mode1v3
44+
**/ios/**/*.mode2v3
45+
**/ios/**/*.moved-aside
46+
**/ios/**/*.pbxuser
47+
**/ios/**/*.perspectivev3
48+
**/ios/**/*sync/
49+
**/ios/**/.sconsign.dblite
50+
**/ios/**/.tags*
51+
**/ios/**/.vagrant/
52+
**/ios/**/DerivedData/
53+
**/ios/**/Icon?
54+
**/ios/**/Pods/
55+
**/ios/**/.symlinks/
56+
**/ios/**/profile
57+
**/ios/**/xcuserdata
58+
**/ios/.generated/
59+
**/ios/Flutter/App.framework
60+
**/ios/Flutter/Flutter.framework
61+
**/ios/Flutter/Flutter.podspec
62+
**/ios/Flutter/Generated.xcconfig
63+
**/ios/Flutter/app.flx
64+
**/ios/Flutter/app.zip
65+
**/ios/Flutter/flutter_assets/
66+
**/ios/Flutter/flutter_export_environment.sh
67+
**/ios/ServiceDefinitions.json
68+
**/ios/Runner/GeneratedPluginRegistrant.*
69+
70+
# Exceptions to above rules.
71+
!**/ios/**/default.mode1v3
72+
!**/ios/**/default.mode2v3
73+
!**/ios/**/default.pbxuser
74+
!**/ios/**/default.perspectivev3
75+
!/packages/flutter_tools/test/data/dart_dependencies_test/**/.packages

‎.metadata‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# This file tracks properties of this Flutter project.
2+
# Used by Flutter tool to assess capabilities and perform upgrades etc.
3+
#
4+
# This file should be version controlled and should not be manually edited.
5+
6+
version:
7+
revision: e6b34c2b5c96bb95325269a29a84e83ed8909b5f
8+
channel: stable
9+
10+
project_type: package

‎.vscode/launch.json‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
{
2+
// Use IntelliSense to learn about possible attributes.
3+
// Hover to view descriptions of existing attributes.
4+
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
5+
"version":"0.2.0",
6+
"configurations": [
7+
{
8+
"name":"Flutter",
9+
"request":"launch",
10+
"type":"dart",
11+
"flutterMode":"debug",
12+
"program":"demo/lib/main.dart"
13+
}
14+
]
15+
}

‎CHANGELOG.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
##[1.0.0]
2+
3+
- Initial release

‎LICENSE‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
TODO: Add your license here.

‎README.md‎

Lines changed: 279 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,279 @@
1+
#Blobs
2+
3+
Create beautiful blob shapes with minimal code. Includes widgets, animations, clipper and services.
4+
5+
Blobs can be created from widgets, clippers and services.
6+
7+
##Features
8+
9+
- Generate blob in any size
10+
- Control the edges and complexity
11+
- Animate the blob
12+
- Set hash ID for a fixed blob
13+
- Shuffle between the fixed blobs
14+
- Loop animation
15+
- Custom clipper
16+
- Get SVG path
17+
- Debug, child, controller and few more
18+
19+
##Contents
20+
21+
-[Widgets](#widgets)
22+
-[Clipper](#clipper)
23+
-[Service](#service)
24+
25+
 
26+
27+
###Widgets
28+
29+
There are four widgets,
30+
31+
-`Blob.random()` - Generate random blobs
32+
-`Blob.animatedRandom()` - Generate blobs and animate the shape change
33+
-`Blob.fromHash()` - Use one or more hash ID's for fixed blobs
34+
-`Blob.animatedFromHash()` - Animate the shape change
35+
36+
Blobs and animations are configurable.
37+
38+
 
39+
40+
>####Blob Size
41+
42+
Size of the blob. It is mandatory.
43+
44+
```dart
45+
Blob.random(size:200),
46+
```
47+
48+
 
49+
50+
>####Blob shape settings
51+
52+
`edgesCount` is the nodes count. Minimum is_3_ and max is_300_. But for cool shapes you can stick between_3-20_. Default is_7_
53+
`minGrowth` is the minimum size of the blob. Value should be an interger between_2-9_. Default is_4_.
54+
55+
```dart
56+
Blob.random(
57+
size:200,
58+
edgesCount:5,
59+
minGrowth:4,
60+
),
61+
```
62+
63+
 
64+
65+
>####Controller
66+
67+
You can use`BlobController`, if you want to change the shape programatically. As of. now it has only one method called`change()`. When you call this, the shape will be changed and returns some useful data of the blob (`BlobData`).
68+
69+
```dart
70+
BlobConroller blobCtrl = BlobController();
71+
```
72+
73+
```dart
74+
Blob.random(
75+
size:200,
76+
edgesCount:5,
77+
minGrowth:4,
78+
controller: blobCtrl
79+
),
80+
```
81+
82+
```dart
83+
BlobData blobData = blobCtrl.change();
84+
```
85+
86+
 
87+
88+
>####Fixed shapes
89+
90+
In most scenarios you wanted a same blob to be loaded every time. This can be achieved using hash. Hash is just a ID, which contains the shape data. You can get the hash id from the`blobData` from the controller's`change()` method.
91+
92+
Blobs app is in progress. Once it is ready, you will be able to generate and get the hash ID from that app.
93+
94+
Hash id looks like`H4sIANhSwV4A/w3LsQ0AMQgEwYY24A5koBbr+2/jnY40NzdxBD7GPagXrznzKKlFbjSBJDKKs9QLE98PNkNQxj0AAAA=`
95+
96+
`hash` option accepts one or multiple id's. If it has only one hash, then it will be a fixed blob.
97+
98+
```dart
99+
Blob.fromHash(
100+
size:200,
101+
hash:['XXXXXXXX...'],
102+
controller: blobCtrl
103+
),
104+
```
105+
106+
If you provide multiple id's, then it will show each one in order on changing.
107+
108+
```dart
109+
Blob.fromHash(
110+
size:200,
111+
hash:['XXXXXXXX...','YYYYYYY....','ZZZZZZZZ....'],
112+
controller: blobCtrl
113+
),
114+
```
115+
116+
 
117+
118+
>####Styles
119+
120+
You can change the color, add gradient, make outlined using`BlobStyles()`
121+
122+
```dart
123+
Blob.random(
124+
size:200,
125+
styles: BlobStyles(
126+
color: Colors.green,
127+
fillType: BlobFillType.STROKE,
128+
gradient: LinearGradient(),
129+
strokeWidth:3,
130+
),
131+
),
132+
```
133+
134+
Gradient can be Linear or Radial.`LinearGradient` will look like this,
135+
136+
```dart
137+
LinearGradient(colors: [Colors.red, Colors.green])
138+
.createShader(Rect.fromLTRB(0, 0, 300, 300))
139+
```
140+
141+
 
142+
143+
>####Child Widget
144+
145+
You can use`child` property to display a child which looks like the blob as background.
146+
147+
```dart
148+
Blob.random(
149+
size:200,
150+
child: Text('I am a child!'),
151+
),
152+
```
153+
154+
 
155+
156+
>####Animating the blobs
157+
158+
Whenever the blobs are changing, this widget will animate the shape change.
159+
160+
```dart
161+
Blob.animatedRandom(
162+
size:200,
163+
edgesCount:5,
164+
minGrowth:4,
165+
duration: Duration(milliseconds:500)
166+
),
167+
```
168+
169+
`duration` is optional. Default is`500` milliseconds.
170+
171+
 
172+
173+
>####Change shapes automatically
174+
175+
When you want to change the shapes automatically you can set`loop` to true.
176+
177+
```dart
178+
Blob.animatedRandom(
179+
size:200,
180+
edgesCount:5,
181+
minGrowth:4,
182+
loop: true,
183+
),
184+
```
185+
186+
 
187+
188+
>####Animate Fixed shapes
189+
190+
If you use`loop` in`Blob.fromAnimatedHash()` widget, it will change shapes within the provided blobs.
191+
192+
```dart
193+
Blob.animatedFromHash(
194+
size:200,
195+
hash:['XXXXXXXX...','YYYYYYY....','ZZZZZZZZ....'],
196+
loop: true,
197+
),
198+
```
199+
200+
 
201+
202+
>####Debug
203+
204+
When you set`debug` to true, it will show you circles and lines that connect the blob points.
205+
206+
```dart
207+
Blob.random(
208+
size:200,
209+
debug: true,
210+
),
211+
```
212+
213+
 
214+
215+
###Clipper
216+
217+
Sometime you. might want to clip the widget by blob shape. In such cases you can use`BlobClipper()`. You can either provide`hash` or`edgesCount` and`minGrowth` options.
218+
219+
```dart
220+
Container(
221+
child: ClipPath(
222+
clipper: BlobClipper(<OPTIONS>),
223+
child: new Image.network("https://bit.ly/2nirIxg"),
224+
),
225+
)
226+
```
227+
228+
&nbsp;
229+
230+
###Service
231+
232+
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`.
233+
234+
```dart
235+
236+
BlobData blobData = BlobGenerator(
237+
edgesCount: 7,
238+
minGrowth: 4,
239+
size: Size(30, 30),
240+
hash: null,
241+
).generate();
242+
243+
```
244+
245+
&nbsp;
246+
247+
>####BlobData
248+
249+
It is the raw data, which contains the path definitions, coordinates and other basic info about the blob.
250+
251+
```dart
252+
BlobData(
253+
dots,
254+
innerRad,
255+
svgPath,
256+
coords,
257+
hash,
258+
edgesCount,
259+
minGrowth,
260+
size,
261+
originalSize,
262+
)
263+
```
264+
265+
&nbsp;
266+
267+
>####SVG
268+
269+
BlobData contains`svgPath` info. It is just a path string which will look like this,
270+
271+
`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`
272+
273+
from this you can easily create SVG like
274+
275+
```svg
276+
<svgviewBox="0 0 400 400"xmlns="http://www.w3.org/2000/svg">
277+
<pathfill="#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" />
278+
</svg>
279+
```

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp