thecodepapaya / show_up_animation

A flutter package to simplify the common "show up" animation

show_up_animation

A flutter package to simplify the implementation of "show up" animation

Getting Started

Install dependencies

dependencies:
  show_up_animation: ^1.0.2

Then import wherever you want to implement the animation

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.

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.

ShowUpList(
  direction: Direction.horizontal,
  animationDuration: Duration(milliseconds: 1500),
  delayBetween: Duration(milliseconds: 800),
  offset: -0.2,
  children: <Widget>[
    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

show_up_animation's Issues

Directions not working

hi, i tried using direction horizontal but always vertical, changed the widget manually to row for working good

Null safety?

Our team is a few packages away from null-safety migration for our app. Any chance to migrate this package?

widgets inside the showuplist can't be changed

i am using a text widget that changes its content every period of time but it stopped working when i putted it inside showuplist animation

Invalid value: Valid value range is empty when using ShowUpList

When I tried to use ShowUpList with enableLazyLoading is false
It throw RangeError (index): Invalid value: Valid value range is empty: 0

Not rerender if using streambuilder