animated_reorderable_list 1.0.7 copy "animated_reorderable_list: ^1.0.7" to clipboard
animated_reorderable_list: ^1.0.7 copied to clipboard

A Flutter Reorderable Animated List with simple implementation and smooth transition.

animated_reorderable_list #

This library is a powerful and easy-to-use solution for implementing animated list and grid with drag-and-drop functionality in Flutter.

Features #

  • Smooth transition during item insertion and removal from the list with animations.
  • Drag and Drop support (ReorderableList) for both ListView and GridView with Animation.
  • Animating items is as simple as updating the list.
  • Pre-built animation like fade,scale, slide, flip etc for Flutter list.
  • Provides support for both lists and grids
  • Supports large lists and creates items on demand as they come into the viewport.

Demo #

Reorderable List #

List Animations #

Grid Animations #

How to use it? #

In the pubspec.yaml, add the dependency:

dependencies:
  animated_reorderable_list: <latest_version>

Import the file:

import 'package:animated_reorderable_list/animated_reorderable_list.dart';

Sample app demonstrates how simple the usage of the library actually is.

Basic usage #

AnimatedReorderableGridView #

A AnimatedGridView with built-in support for drag and drop functionality.

AnimatedReorderableGridView(
   items: list, 
   scrollDirection: Axis.vertical,
   itemBuilder: (BuildContext context, int index) {
      return ItemCard(
      key: Key(list[index].name),
      index: list[index].index);
      },
   sliverGridDelegate:
      const SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: 4),
   enterTransition: [FadeIn(), ScaleIn()],
   exitTransition:  [SlideIn()],
   insertDuration: const Duration(milliseconds: 300),
   removeDuration: const Duration(milliseconds: 300),
   onReorder: (int oldIndex, int newIndex) {
      setState(() {
        final User user = list.removeAt(oldIndex);
          list.insert(newIndex, user);
        });
      },
  )

AnimatedReorderableListView #

A AnimatedListView with built-in support for drag-and-drop functionality.

 AnimatedReorderableListView(
    items: list,
    itemBuilder: (BuildContext context, int index) {
        return ItemTile(
        key: Key(list[index].name),
        index: list[index].index);
        },
    enterTransition: [FlipInX(), ScaleIn()],,
    exitTransition: [SlideInLeft()]
    insertDuration: const Duration(milliseconds: 300),
    removeDuration: const Duration(milliseconds: 300),
    onReorder: (int oldIndex, int newIndex) {
      setState(() {
        final User user = list.removeAt(oldIndex);
         list.insert(newIndex, user);
       });
      },
  )

AnimatedListView #

A AnimatedListView that animates insertion and removal of the item.

AnimatedListView(
    items: list,
    itemBuilder: (BuildContext context, int index) {
       return ItemTile(
       key: Key(list[index].name),
       index: list[index].index);
       },
    enterTransition: [FadeIn(), ScaleIn()],
    exitTransition:  [SlideIn()],
    insertDuration: const Duration(milliseconds: 300),
    removeDuration: const Duration(milliseconds: 300),
  ),

AnimatedGridView #

A AnimatedGridView that animates insertion and removal of the item.

AnimatedGridView(
   items: list,
   scrollDirection: Axis.vertical,
   itemBuilder: (BuildContext context, int index) {
      return ItemCard(
      key: Key(list[index].name),
      index: list[index].index);
      },
   sliverGridDelegate:
      const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4),
   enterTransition: [FadeIn(), ScaleIn()],
   exitTransition:  [SlideIn()],
   insertDuration: const Duration(milliseconds: 300),
   removeDuration: const Duration(milliseconds: 300),
 )

Duration for animation #

//optional
   insertDuration: const Duration(milliseconds: 300),
   removeDuration: const Duration(milliseconds: 300),

The duration for item insertion and removal animation. If not specified, the default duration is Duration(milliseconds: 300).

Enter and exit Animation #

To apply animation, while inserting or removing item, specify a list of animation:

//optional
    enterTransition: [FadeIn(), ScaleIn()],
    exitTransition:  [SlideIn()],

If not specified, then default FadeIn() animation will be applied.

Delay, duration, curve #

Animation have optional delay, duration, begin, end and curve parameters. Animations run in parallel, but you can use a delay to run them sequentially:

//optional
 enterTransition: [
     FadeIn(
        duration: const Duration(milliseconds: 300),
        delay: const Duration(milliseconds: 100)),
     ScaleIn(
        duration: const Duration(milliseconds: 500),
        curve: Curves.bounceInOut)
    ],

If a specific duration is provided for the animation, it will run for that specified duration. However, if insertDuration or removeDuration are specified, it will override specific item duration.

Custom AnimationBuilder #

//optional
insertItemBuilder: (Widget child, Animation<double> animation){
      return ScaleTransition(
         scale: animation,
         child: child,
     );
  }
                                    
removeItemBuilder: (Widget child, Animation<double> animation){
       return ScaleTransition(
          scale: animation,
          child: child,
      );
    }

You can use custom insertItemBuilder or removeItemBuilder if you wish to implement your own customized animations instead of relying on the built-in animations provided by the library. In these custom builder functions, the child parameter represents the widget returned by the itemBuilder callback, and the animation parameter provides the animation control.

If a custom insertItemBuilder is provided, it will override the enterTransition. Similarly, if removeItemBuilder is provided, then it will override exitTransition.

Bugs and Feedback #

We welcome and appreciate any suggestions you may have for improvement. For bugs, questions and discussions please use the Github Issues.

Acknowledgments #

This library builds upon the foundation laid by the incredible work of the Flutter team. The core logic for animated list and drag-and-drop functionality are derived from Flutter's native widgets, specifically AnimatedList and ReorderableListView.

Credits #

animated_reorderable_list is owned and maintained by the Canopas team. You can follow them on Twitter at @canopassoftware for project updates and releases.

Inspired by recyclerview-animators in Android.

69
likes
160
pub points
89%
popularity

Publisher

verified publishercanopas.com

A Flutter Reorderable Animated List with simple implementation and smooth transition.

Repository (GitHub)
View/report issues

Topics

#animated-list #reorderable-list #reorderable-grid #drag-and-drop #list

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

flutter

More

Packages that depend on animated_reorderable_list