https://github.com/HitenDev/flutter_effects
flutter animation effects | custom widget | custom renderobject
https://github.com/HitenDev/flutter_effects
animation customwidget effect effects flutter flutter-apps flutter-demo flutter-effect flutter-effects flutter-examples flutter-material flutter-package flutter-plugin flutter-widget
Last synced: 3 months ago
JSON representation
flutter animation effects | custom widget | custom renderobject
- Host: GitHub
- URL: https://github.com/HitenDev/flutter_effects
- Owner: HitenDev
- License: apache-2.0
- Created: 2019-03-07T10:00:54.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-09-29T03:00:02.000Z (over 2 years ago)
- Last Synced: 2024-11-03T20:36:46.251Z (8 months ago)
- Topics: animation, customwidget, effect, effects, flutter, flutter-apps, flutter-demo, flutter-effect, flutter-effects, flutter-examples, flutter-material, flutter-package, flutter-plugin, flutter-widget
- Language: Dart
- Homepage:
- Size: 381 KB
- Stars: 494
- Watchers: 15
- Forks: 55
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# flutter effects
A flutter package which contains a collection of some cool and beautiful effects; support `android` and `ios` .
## Screenshot
| type | support child | screenshot |
| :--: | :--: | :--: |
| diffscale | text | 
|
| borderline | any |
|
| rainbow | text | 
|
| explosion | any | 
|
| anvil | any | 
|
| scratchcard | any | 
|
| more | more | waiting |
## Usage
### diffscale
```dart
void initState() {
super.initState();
sentences = [
"What is design?",
"Design is not just",
"what it looks like and feels like.",
"Design is how it works. \n- Steve Jobs",
"Older people",
"sit down and ask,",
"'What is it?'",
"but the boy asks,",
"What can I do with it?. \n- Steve Jobs",
"Swift",
"Objective-C",
"iPhone",
"iPad",
"Mac Mini",
"MacBook Pro",
"Mac Pro",
"爱老婆",
"老婆和女儿"
];
}
DiffScaleText(
text: sentences[diffScaleNext % sentences.length],
textStyle: TextStyle(fontSize: 20, color: Colors.blue),
)
```
Note:the variable `diffScaleNext` control next position;
### borderline
```dart
LineBorderText(
child: Text(
"Border Effect",
style: TextStyle(fontSize: 20),
),
autoAnim: true)
```
### rainbow
```dart
RainbowText(colors: [
Color(0xFFFF2B22),
Color(0xFFFF7F22),
Color(0xFFEDFF22),
Color(0xFF22FF22),
Color(0xFF22F4FF),
Color(0xFF5400F7),
], text: "Welcome to BBT", loop: true)
```
### explosion
```dart
ExplosionWidget(
tag: "Explosion Text",
child: Container(
alignment: Alignment.center,
color: Colors.blueAccent,
child: Text(
"Explosion Text",
style: TextStyle(
fontSize: 20,
color: Colors.red,
fontWeight: FontWeight.bold),
)))
```
### anvil
```dart
AnvilEffectWidget(child: Text(
"👉AnvilEffect👈",
style: TextStyle(color: Colors.white, fontSize: 20),
)
```
### scratchcard
```dart
ScratchCardWidget(
strokeWidth: 20,
threshold: 0.5,
foreground: (canvas, size, offset) {
if (_image != null) {
double scale;
double dx = 0;
double dy = 0;
if (_image.width * size.height >
size.width * _image.height) {
scale = size.height / _image.height;
dx = (size.width - _image.width * scale) / 2;
} else {
scale = size.width / _image.width;
dy = (size.height - _image.height * scale) / 2;
}
canvas.save();
canvas.translate(dx, dy);
canvas.scale(scale, scale);
canvas.drawImage(_image, Offset(0, 0), new Paint());
canvas.restore();
} else {
canvas.drawRect(
Rect.fromLTWH(0, 0, size.width, size.height),
Paint()
..color = Colors.grey);
}
},
child: Container(
color: Colors.blueAccent,
alignment: Alignment.center,
child: Image.asset(
"assets/images/icon_sm_sigin_status_three.png",
fit: BoxFit.scaleDown, height: 20,),
))
```
- strokeWidth : paint's strokewidth
- threshold : the threshold to clear the foreground covering
- foreground : draw foreground covering
- child : draw child
##
More flutter effects are under development, so stay tuned! please follow me.
# Author
- Name: Hiten
- Blog: https://juejin.im/user/595a16125188250d944c6997
- Email: [email protected]
# License
This project is licensed under the [Apache Software License, Version 2.0](http://www.apache.org/licenses/LICENSE-2.0).
See [`LICENSE`](LICENSE) for full of the license text.