Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thecodepapaya/show_up_animation
A flutter package to simplify the common "show up" animation
https://github.com/thecodepapaya/show_up_animation
animation flutter package pubdev
Last synced: 18 days ago
JSON representation
A flutter package to simplify the common "show up" animation
- Host: GitHub
- URL: https://github.com/thecodepapaya/show_up_animation
- Owner: thecodepapaya
- License: mit
- Created: 2020-04-21T12:19:31.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-07-23T04:59:33.000Z (almost 2 years ago)
- Last Synced: 2024-03-02T05:33:19.856Z (4 months ago)
- Topics: animation, flutter, package, pubdev
- Language: Dart
- Homepage: https://pub.dev/packages/show_up_animation
- Size: 1.09 MB
- Stars: 22
- Watchers: 1
- Forks: 10
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-stars - show_up_animation
README
# show_up_animation [](https://travis-ci.com/thecodepapaya/show_up_animation)
A flutter package to simplify the implementation of "show up" animation
## Getting Started
Install dependencies
```yaml
dependencies:
show_up_animation: ^1.0.2
```
Then import wherever you want to implement the animation
```dart
import 'package:show_up_animation/show_up_animation.dart';
```
### ShowUpAnimation
Wrap any widget you want to animate inside `ShowUpAnimation` widget and provide a `Duration()` to `delayStart` field to control after how much delay the animation fires.
```dart
ShowUpAnimation(
delayStart: Duration(seconds: 1),
animationDuration: Duration(seconds: 1),
curve: Curves.bounceIn,
direction: Direction.vertical,
offset: 0.5,
child: YourWidget(),
),
```
### ShowUpList
To create a list of "show up" animations, use `ShowUpList` and provide
your list of widgets to `children` parameter.
```dart
ShowUpList(
direction: Direction.horizontal,
animationDuration: Duration(milliseconds: 1500),
delayBetween: Duration(milliseconds: 800),
offset: -0.2,
children: [
Widget1(),
Widget2(),
Widget3(),
Widget4(),
],
),
```
## Properties
### ShowUpAnimation Properties
You can customize how to do you want to animate your `child` using the parameters described below.
| Property | Function |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| child | The widget on which to apply the given `ShowUpAnimation` |
| offset | The offset by which to slide and [child] into view from [Direction]. Use negative value to reverse animation [direction]. Defaults to 0.2 |
| curve | The curve used to animate the [child] into view. Defaults to [Curves.easeIn] |
| direction | horizontal or vertical |
| delayStart | The delay with which to animate the [child]. Takes in a [Duration] and defaults to 0 seconds |
| animationDuration | The total duration in which the animation completes. Defaults to 800 milliseconds |
### ShowUpList Properties
| Property | Function |
| ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| children | The list of widgets on which to apply the given `ShowUpAnimation` |
| offset | The offset by which to slide and [child] into view from [Direction]. Use negative value to reverse animation [direction]. Defaults to 0.2 |
| curve | The curve used to animate each [child] into view. Defaults to [Curves.easeIn] |
| direction | horizontal or vertical |
| delayBetween | he delay between animating each [children] into view. Takes in a [Duration] and defaults to 300 milliseconds |
| animationDuration | The total duration in which the animation of each child completes. Defaults to 500 milliseconds |
## Demo
