flutter_staggered_animations 0.1.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 94

Flutter Staggered Animations #

Easily add staggered animations to your ListView, GridView, Column and Row children as shown in Material Design guidelines

Showcase #

ListViewGridViewColumn

Installation #

Dependency #

Add the package as a dependency in your pubspec.yaml file.

dependencies:
  flutter_staggered_animations: "^0.1.2"

Import #

Import the package in your code file.

import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';

Basic usage #

Here is a sample code to apply a staggered animation on ListView items.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: AnimationLimiter(
      child: ListView.builder(
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return AnimationConfiguration.staggeredList(
            position: index,
            duration: const Duration(milliseconds: 375),
            child: SlideAnimation(
              verticalOffset: 50.0,
              child: FadeInAnimation(
                child: YourListChild(),
              ),
            ),
          );
        },
      ),
    ),
  );
}

API Overview #

This package contains three type of classes:

  • Animation
  • AnimationConfiguration
  • AnimationLimiter

Animations #

Animations are split into 4 classes:

  • FadeInAnimation
  • SlideAnimation
  • ScaleAnimation
  • FlipAnimation

Animations can be composed to produce advanced animations effects by wrapping them.

Example of a SlideAnimation combined with a FadeInAnimation:

child: SlideAnimation(
  verticalOffset: 50.0,
    child: FadeInAnimation(
      child: YourListChild(),
    ),
)

Animations must be direct children of AnimationConfiguration.

AnimationConfiguration #

AnimationConfiguration is an InheritedWidget that shares its animation settings with its children (mainly duration and delay).

Named constructors #

Depending on the scenario in which you will present your animations, you should use one of AnimationConfiguration's named constructors.

  • AnimationConfiguration.synchronized if you want to launch all children's animations at the same time.
  • AnimationConfiguration.staggeredList if you want to delay the animation of each child to produce a single-axis staggered animations (from top to bottom or from left to right).
  • AnimationConfiguration.staggeredGrid if you want to delay the animation of each child to produce a dual-axis staggered animations (from left to right and top to bottom).

If you're not in the context of a ListView or GridView, an utility static method is available to help you apply staggered animations to the children of a Row or Column:

  • AnimationConfiguration.toStaggeredList

You can override duration and delay in each child Animation if needed.

AnimationLimiter #

In the context of a scrollable view, your children's animations are only built when the user scrolls and they appear on the screen. This create a situation where your animations will be run as you scroll through the content. If this is not a behaviour you want in your app, you can use AnimationLimiter.

AnimationLimiter is an InheritedWidget that prevents the children widgets to be animated if they don't appear in the first frame where AnimationLimiter is built.

To be effective, AnimationLimiter must be a direct parent of your scrollable list of widgets.

You can omit AnimationLimiter if your view is not scrollable.

Quick samples #

ListView #

Here is a sample code to apply a staggered animation on the children of a ListView.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: AnimationLimiter(
      child: ListView.builder(
        itemCount: 100,
        itemBuilder: (BuildContext context, int index) {
          return AnimationConfiguration.staggeredList(
            position: index,
            duration: const Duration(milliseconds: 375),
            child: SlideAnimation(
              verticalOffset: 50.0,
              child: FadeInAnimation(
                child: YourListChild(),
              ),
            ),
          );
        },
      ),
    ),
  );
}

GridView #

Here is a sample code to apply a staggered animation on the children of a GridView.

@override
Widget build(BuildContext context) {
  int columnCount = 3;

  return Scaffold(
    body: AnimationLimiter(
      child: GridView.count(
        crossAxisCount: columnCount,
        children: List.generate(
          100,
          (int index) {
            return AnimationConfiguration.staggeredGrid(
              position: index,
              duration: const Duration(milliseconds: 375),
              columnCount: columnCount,
              child: ScaleAnimation(
                child: FadeInAnimation(
                  child: YourListChild(),
                ),
              ),
            );
          },
        ),
      ),
    ),
  );
}

Column #

Here is a sample code to apply a staggered animation on the children of a Column.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: AnimationLimiter(
          child: Column(
            children: AnimationConfiguration.toStaggeredList(
              duration: const Duration(milliseconds: 375),
              childAnimationBuilder: (widget) => SlideAnimation(
                horizontalOffset: 50.0,
                child: FadeInAnimation(
                  child: widget,
                ),
              ),
              children: YourColumnChildren(),
            ),
          ),
        ),
      ),
    );
  }

License #

Flutter Staggered Animations is released under the MIT License

About us #

We are a french mobile design and development team.

Website : https://www.mobiten.com

Changelog #

All notable changes to this project will be documented in this file.

[0.1.2] - 2019-09-11

Fixed #

  • #1 Do not forward animation after dispose
  • Remove misleading usage of staggeredList instead of staggeredGrid in GridView sample

[0.1.1] - 2019-09-05

Added #

  • Logo in README

[0.1.0] - 2019-09-04

Added #

  • Example app to show the use of the library
  • Static analysis configuration

Fixed #

  • Fix all static analysis info and errors

[0.0.1] - 2019-09-04

  • Initial release

example/README.md

Example #

Example application to illustrate library capabilities.

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_staggered_animations: ^0.1.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:flutter_staggered_animations/flutter_staggered_animations.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
88
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]
94
Learn more about scoring.

We analyzed this package on Oct 9, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test
pedantic ^1.7.0