show_up_animation 1.0.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 86

show_up_animation Build Status #

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.

PropertyFunction
childThe widget on which to apply the given ShowUpAnimation
offsetThe offset by which to slide and [child] into view from [Direction]. Use negative value to reverse animation [direction]. Defaults to 0.2
curveThe curve used to animate the [child] into view. Defaults to [Curves.easeIn]
directionhorizontal or vertical
delayStartThe delay with which to animate the [child]. Takes in a [Duration] and defaults to 0 seconds
animationDurationThe total duration in which the animation completes. Defaults to 800 milliseconds

ShowUpList Properties #

PropertyFunction
childrenThe list of widgets on which to apply the given ShowUpAnimation
offsetThe offset by which to slide and [child] into view from [Direction]. Use negative value to reverse animation [direction]. Defaults to 0.2
curveThe curve used to animate each [child] into view. Defaults to [Curves.easeIn]
directionhorizontal or vertical
delayBetweenhe delay between animating each [children] into view. Takes in a [Duration] and defaults to 300 milliseconds
animationDurationThe total duration in which the animation of each child completes. Defaults to 500 milliseconds

Demo #

videotogif_2020 04 21_19 44 01 videotogif_2020 04 30_04 07 18

[1.0.2] - 2020-06-12 #

  • Fixed broken links

  • Updated Readme

[1.0.1] - 2020-04-30 #

  • Added new method ShowUpList to simplify creation of a list of ShowUpAnimation widgets

[1.0.0] - 2020-04-22 #

  • Added API references

  • Finalized API

[0.0.1] - 2020-04-21 #

  • Initial release

  • Published to pub.dartlang.org

example/lib/main.dart

import 'package:example/show_up_builder_demo.dart';
import 'package:example/show_up_demo.dart';
import 'package:example/show_up_list_demo.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  final String title = "Show up Demo";
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: this.title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: this.title),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Choose a demo"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text("Show Up Animation"),
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (BuildContext context) {
                      return ShowUpDemo();
                    },
                  ),
                );
              },
            ),
            SizedBox(height: 40),
            RaisedButton(
              child: Text("Show Up List"),
              onPressed: () {
                Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (BuildContext context) {
                      return ShowUpListDemo();
                    },
                  ),
                );
              },
            ),
            // SizedBox(height: 40),
            // RaisedButton(
            //   child: Text("Show Up Builder"),
            //   onPressed: () {
            //     Navigator.of(context).push(
            //       MaterialPageRoute(
            //         builder: (BuildContext context) {
            //           return ShowUpBuilderDemo();
            //         },
            //       ),
            //     );
            //   },
            // ),
          ],
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  show_up_animation: ^1.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:show_up_animation/show_up_animation.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
73
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
86
Learn more about scoring.

We analyzed this package on Jul 14, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.15
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • show_up_animation that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test