auto_animated 2.0.1

Auto animated #

Make an animated on scroll widgets in 2 minutes? Easily! #

Showcase #

ListViewGridViewSliver

Getting Started #

In your flutter project add the dependency:

pub package

dependencies:
  auto_animated: any

For help getting started with Flutter, view the online documentation.

Api overview #

List

  • LiveList
  • LiveSliverList

Grid

  • LiveGrid
  • LiveSliverGrid

All (Animate on scroll for all widgets in all scroll view)

  • AnimateIfVisibleWrapper
  • AnimateIfVisible

Another animated widgets

  • LiveIconButton

Options for all examples #

declared options variable for all next examples

final options = LiveOptions(
  // Start animation after (default zero)
  delay: Duration(seconds: 1),

  // Show each item through (default 250)
  showItemInterval: Duration(milliseconds: 500),

  // Animation duration (default 250)
  showItemDuration: Duration(seconds: 1),

  // Animations starts at 0.05 visible
  // item fraction in sight (default 0.025)
  visibleFraction: 0.05,

  // Repeat the animation of the appearance 
  // when scrolling in the opposite direction (default false)
  // To get the effect as in a showcase for ListView, set true
  reAnimateOnVisibility: false,
);

declared buildAnimatedItem function for all next examples

We use standard Flutter animations. This will allow you to customize your animations as much as possible.

// Build animated item (helper for all examples)
Widget buildAnimatedItem(
  BuildContext context,
  int index,
  Animation<double> animation,
) =>
  // For example wrap with fade transition
  FadeTransition(
    opacity: Tween<double>(
      begin: 0,
      end: 1,
    ).animate(animation),
    // And slide transition
    child: SlideTransition(
      position: Tween<Offset>(
        begin: Offset(0, -0.1),
        end: Offset.zero,
      ).animate(animation),
      // Paste you Widget
      child: YouWidgetHere(),
    ),
  );

List usage example #

// With predefined options
LiveList.options(
  options: options,

  // Like ListView.builder, but also includes animation property
  itemBuilder: buildAnimatedItem,

  // Other properties correspond to the 
  // `ListView.builder` / `ListView.separated` widget
  scrollDirection: Axis.horizontal,
  itemCount: 10,
);

// Or raw
LiveList(
  delay: /*...*/,
  showItemInterval: /*...*/,
  // ... and all other arguments from `LiveOptions` (see above)
);

Grid usage example #

// With predefined options
LiveGrid.options(
  options: options,

  // Like GridView.builder, but also includes animation property
  itemBuilder: buildAnimatedItem,

  // Other properties correspond to the `ListView.builder` / `ListView.separated` widget
  itemCount: itemsCount,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 16,
    mainAxisSpacing: 16,
  ),
);

// Or raw
LiveGrid(
  delay: /*...*/,
  showItemInterval: /*...*/,
  // ... and all other arguments from `LiveOptions` (see above)
);

Slivers usage example #

LiveSliverList & LiveSliverGrid also supports .options constructor like LiveList.options() & LiveGrid.options() but in this example we omit them

final scrollController = ScrollController()
final int listItemCount = 4;
final Delay listShowItemDuration = Duration(milliseconds: 250);

CustomScrollView(
  // Must add scrollController to sliver root
  controller: scrollController,

  slivers: <Widget>[
    LiveSliverList(
      // And attach root sliver scrollController to widgets
      controller: scrollController,

      showItemDuration: listShowItemDuration,
      itemCount: listItemCount,
      itemBuilder: buildAnimatedItem,
    ),
    LiveSliverGrid(
      // And attach root sliver scrollController to widgets
      controller: scrollController,

      // If list and grid simultaneously in sight
      // sync with LiveSliverList (see up)
      delay: listShowItemDuration * (listItemCount + 1),

      itemCount: 12,
      itemBuilder: buildAnimatedItem,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        crossAxisSpacing: 16,
        mainAxisSpacing: 16,
      ),
    ),
  ],
);

Animate all widgets on scroll #

You can use different animations and different appearance times for different elements.

// Wrap scrollView with [AnimateIfVisibleWrapper]
// for synchronized (consistent) child showing
AnimateIfVisibleWrapper(
  // Show each item through (default 250)
  showItemInterval: Duration(milliseconds: 150),

  child: SingleChildScrollView(
    child: Column(
      children: <Widget>[
        // First item with `FadeTransition` and show duration 500
        AnimateIfVisible(
          key: Key('item.1'),
          duration: Duration(milliseconds: 500),
          builder: (
            BuildContext context,
            int index,
            Animation<double> animation,
          ) =>
            FadeTransition(
              opacity: Tween<double>(
                begin: 0,
                end: 1,
              ).animate(animation),
              child: YouFirstWidget(),
            ),
        ),

        // Second item with `SlideTransition` and show duration 350
        AnimateIfVisible(
          key: Key('item.2'),
          duration: Duration(milliseconds: 350),
          builder: (
            BuildContext context,
            int index,
            Animation<double> animation,
          ) =>
            SlideTransition(
              position: Tween<Offset>(
                begin: Offset(0, -0.1),
                end: Offset.zero,
              ).animate(animation),
              child: YouSecondWidget(),
            ),
        ),
      ],
    ),
  ),
);

LiveIconButton usage example

// Simple
LiveIconButton(
  icon: AnimatedIcons.arrow_menu,
  onPressed: () {},
);

// With separate tooltips
LiveIconButton(
  icon: AnimatedIcons.arrow_menu,
  firstTooltip: 'Event',
  secondTooltip: 'Add',
  onPressed: () {},
);

2.0.1 #

  • Fix missing import for LiveOptions (issue#23)

2.0.0 #

  • All widgets with pattern AutoAnimated{List,Grid,SliverList,SliverGrid,IconButton} renamed to Live{List,Grid,SliverList,SliverGrid,IconButton}. For example: AutoAnimatedList now named LiveList
  • AnimateOnVisibilityWrapper renamed to AnimateIfVisibleWrapper and AnimateOnVisibilityChange renamed to AnimateIfVisible
  • Added {List,Grid,SliverList,SliverGrid,IconButton}.options constructors
  • Removed AutoAnimated.separated() constructor. Now property separatorBuilder added in LiveList() & LiveList.options() constructor and marked as optional
  • Added LiveOptions
  • Added visibleFraction as option for Live{List,Grid,SliverList,SliverGrid,IconButton} & LiveOptions. Animations starts at double visibleFraction visible item fraction in sight (default 0.025)
  • Docs improvements

2.0.0-dev.4 #

  • SliverList & SliverGrid now requires scrollController (From custom CustomScrollView). It is necessary in order to find out in which direction the widget scrolls in order to play the animation in the corresponding direction
  • hideWhenGoingBeyond renamed to reAnimateOnVisibility & works with all widgets of the library normally

2.0.0-dev.3 #

  • Fixed reanimate on view unmount
  • Added hideWhenGoingBeyond value Hide the element when it approaches the frame of the screen so that in the future, when it falls into the visibility range, the animation can be played again. The appearance animation will also play when the item is redrawn. Redrawing is peculiar for all list \ grid views with builder methods

2.0.0-dev.2 #

  • Replace list gif in readme

2.0.0-dev.1 #

  • Improvement animation algorithm for AutoAnimatedList, AutoAnimatedSliverList, AutoAnimatedGrid, AutoAnimatedSliverGrid. Now animations start on scroll (element visibility change)

1.4.0-dev.1 #

  • Added AnimateOnVisibilityChange & AnimateOnVisibilityWrapper

1.3.0 #

  • Fixed lexical error in AutoAnimatedIconButton (firstToolip & secondToolip renamed to firstTooltip & secondTooltip)

1.3.0-dev.5 #

  • Fixed error when timer not initialized

1.3.0-dev.4 #

  • Fixed items auto additions after animation end

1.3.0-dev.3 #

  • Fixed retry animation on items count change
  • Marked itemCount required
  • Removed deprecated props

1.3.0-dev.2 #

  • Added AutoAnimatedGrid
  • Added AutoAnimatedSliverGrid

1.3.0-dev.1 #

  • Added AutoAnimatedSliverList

1.2.3 #

  • Forward animation on items count changed in AutoAnimatedList

1.2.2 #

  • Fixed dispose in AutoAnimatedIconButton

1.2.1 #

  • Fixed auto setting state on rebuild widget for AutoAnimatedIconButton

1.2.0 #

  • Added constructor AutoAnimatedIconButton.externalState with iconState property

1.1.0 #

  • Added AutoAnimatedListState.separated
  • Added AutoAnimatedIconButton
  • Optimized performance

1.0.1 #

  • Fixed screenshots paths for pub.dev

1.0.0 #

  • Initial release.

example/README.md

Example of usage auto_animated

import 'package:flutter/material.dart';

import 'package:auto_animated/auto_animated.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        home: Scaffold(
          backgroundColor: Colors.grey[100],
          appBar: AppBar(
            title: Text('Auto animated example'),
            leading: LiveIconButton(
              icon: AnimatedIcons.menu_close,
              firstTooltip: 'Menu',
              secondTooltip: 'Close',
              onPressed: () {},
            ),
          ),
          body: Column(
            children: <Widget>[
              SizedBox(
                height: 200,
                child: LiveList(
                  showItemInterval: Duration(milliseconds: 500),
                  showItemDuration: Duration(seconds: 1),
                  padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 24),
                  scrollDirection: Axis.horizontal,
                  itemsCount: 10,
                  itemBuilder: _buildAnimatedItem,
                ),
              ),
            ],
          ),
        ),
      );

  /// Wrap Ui item with animation & padding
  Widget _buildAnimatedItem(
    BuildContext context,
    int index,
    Animation<double> animation,
  ) =>
      FadeTransition(
        opacity: Tween<double>(
          begin: 0,
          end: 1,
        ).animate(animation),
        child: SlideTransition(
          position: Tween<Offset>(
            begin: Offset(0, -0.1),
            end: Offset.zero,
          ).animate(animation),
          child: Padding(
            padding: EdgeInsets.only(right: 32),
            child: _buildCard(index.toString()),
          ),
        ),
      );

  /// UI item for showing
  Widget _buildCard(String text) => Builder(
        builder: (context) => Container(
          width: 140,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(4),
            child: Material(
              color: Colors.lime,
              child: Center(
                child: Text(
                  text,
                  style: Theme.of(context)
                      .textTheme
                      .display1
                      .copyWith(color: Colors.black),
                ),
              ),
            ),
          ),
        ),
      );
}

Use this package as a library

1. Depend on it

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


dependencies:
  auto_animated: ^2.0.1

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:auto_animated/auto_animated.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
86
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]
93
Learn more about scoring.

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

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.5.2 <3.0.0
flutter 0.0.0
flutter_widgets ^0.1.7+1 0.1.11
Transitive dependencies
charcode 1.1.3
collection 1.14.11 1.14.12
csslib 0.16.1
html 0.14.0+3
matcher 0.12.6
meta 1.1.8
path 1.6.4
quiver 2.1.2+1
sky_engine 0.0.99
source_span 1.6.0
stack_trace 1.9.3
term_glyph 1.1.0
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test
pedantic ^1.8.0+1