A Flutter ListView that implicitly animates between the changes of two lists with support to reorder its items.

Overview

Implicitly Animated Reorderable List

pub package GitHub Stars

A Flutter ListView that implicitly calculates the changes between two lists using the MyersDiff algorithm and animates between them for you. The ImplicitlyAnimatedReorderableList adds reordering support to its items with fully custom animations.

Demo

Click here to view the full example.

Installing

Add it to your pubspec.yaml file:

dependencies:
  implicitly_animated_reorderable_list: ^0.4.2

Install packages from the command line

flutter packages get

If you like this package, consider supporting it by giving it a star on GitHub and a like on pub.dev ❤️

Usage

The package contains two ListViews: ImplicitlyAnimatedList which is the base class and offers implicit animation for item insertions, removals as well as updates, and ImplicitlyAnimatedReorderableList which extends the ImplicitlyAnimatedList and adds reordering support to its items. See examples below on how to use them.

ImplicitlyAnimatedList

ImplicitlyAnimatedList is based on AnimatedList and uses the MyersDiff algorithm to calculate the difference between two lists and calls insertItem and removeItem on the AnimatedListState for you.

Example

// Specify the generic type of the data in the list.
ImplicitlyAnimatedList<MyGenericType>(
  // The current items in the list.
  items: items,
  // Called by the DiffUtil to decide whether two object represent the same item.
  // For example, if your items have unique ids, this method should check their id equality.
  areItemsTheSame: (a, b) => a.id == b.id,
  // Called, as needed, to build list item widgets.
  // List items are only built when they're scrolled into view.
  itemBuilder: (context, animation, item, index) {
    // Specifiy a transition to be used by the ImplicitlyAnimatedList.
    // See the Transitions section on how to import this transition.
    return SizeFadeTransition(
      sizeFraction: 0.7,
      curve: Curves.easeInOut,
      animation: animation,
      child: Text(item.name),
    ); 
  },
  // An optional builder when an item was removed from the list.
  // If not specified, the List uses the itemBuilder with 
  // the animation reversed.
  removeItemBuilder: (context, animation, oldItem) {
    return FadeTransition(
      opacity: animation,
      child: Text(oldItem.name),
    );
  },
);

If you have a CustomScrollView you can use the SliverImplicitlyAnimatedList.

As AnimatedList doesn't support item moves, a move is handled by removing the item from the old index and inserting it at the new index.

ImplicitlyAnimatedReorderableList

ImplicitlyAnimatedReorderableList is based on ImplicitlyAnimatedList and adds reordering support to the list.

Example

ImplicitlyAnimatedReorderableList<MyGenericType>(
  items: items,
  areItemsTheSame: (oldItem, newItem) => oldItem.id == newItem.id,
  onReorderFinished: (item, from, to, newItems) {
    // Remember to update the underlying data when the list has been
    // reordered.
    setState(() {
      items
        ..clear()
        ..addAll(newItems);
    });
  },
  itemBuilder: (context, itemAnimation, item, index) {
    // Each item must be wrapped in a Reorderable widget.
    return Reorderable(
      // Each item must have an unique key.
      key: ValueKey(item),
      // The animation of the Reorderable builder can be used to
      // change to appearance of the item between dragged and normal
      // state. For example to add elevation when the item is being dragged.
      // This is not to be confused with the animation of the itemBuilder.
      // Implicit animations (like AnimatedContainer) are sadly not yet supported.
      builder: (context, dragAnimation, inDrag) {
        final t = dragAnimation.value;
        final elevation = lerpDouble(0, 8, t);
        final color = Color.lerp(Colors.white, Colors.white.withOpacity(0.8), t);

        return SizeFadeTransition(
          sizeFraction: 0.7,
          curve: Curves.easeInOut,
          animation: itemAnimation,
          child: Material(
            color: color,
            elevation: elevation,
            type: MaterialType.transparency,
            child: ListTile(
              title: Text(item.name),
              // The child of a Handle can initialize a drag/reorder.
              // This could for example be an Icon or the whole item itself. You can
              // use the delay parameter to specify the duration for how long a pointer
              // must press the child, until it can be dragged.
              trailing: Handle(
                delay: const Duration(milliseconds: 100),
                child: Icon(
                  Icons.list,
                  color: Colors.grey,
                ),
              ),
            ),
          ),
        );
      },
    );
  },
  // Since version 0.2.0 you can also display a widget
  // before the reorderable items...
  header: Container(
    height: 200,
    color: Colors.red,
  ),
  // ...and after. Note that this feature - as the list itself - is still in beta!
  footer: Container(
    height: 200,
    color: Colors.green,
  ),
  // If you want to use headers or footers, you should set shrinkWrap to true
  shrinkWrap: true,
);

For a more in depth example click here.

Transitions

You can use some custom transitions (such as the SizeFadeTransition) for item animations by importing the transitions pack:

import 'package:implicitly_animated_reorderable_list/transitions.dart';

If you want to contribute your own custom transitions, feel free to make a pull request.

Caveats

Note that this package is still in its very early phase and not enough testing has been done to guarantee stability.

Also note that computing the diff between two very large lists may take a significant amount of time (the computation is done on a background isolate though unless spawnIsolate is set to false).

Acknowledgements

The diff algorithm that ImplicitlyAnimatedList uses was written by Dawid Bota at GitLab.

Roadmap

You can take a look at the Roadmap to see which featues I am working on or plan to implement in future versions.

You might also like...

Bubbleslider - A flutter package support a slider customize UI with bubble animation

Bubbleslider - A flutter package support a slider customize UI with bubble animation

bubble_slider This package support a slider customize UI with bubble animation.

Jul 26, 2022

A flutter package which contains a collection of some cool and beautiful effects; support android and ios

A flutter package which contains a collection of some cool and beautiful effects; support android and ios

flutter effects A flutter package which contains a collection of some cool and beautiful effects; support android and ios . Screenshot type support ch

Jan 3, 2023

An animated menu with both RTL and LTR direction support

animated_menu A new Flutter package project. Getting Started This project is a starting point for a Dart package, a library module containing code tha

Jan 31, 2022

🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

🔔  A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Jan 6, 2023

This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS

This repository demonstrates use of various widgets in flutter and tricks to create beautiful UI elements in flutter for Android and IOS

AwesomeFlutterUI The purpose of this repository is to demonstrate the use of different widgets and tricks in flutter and how to use them in your proje

Nov 13, 2022

This is a Flutter URL preview plugin for Flutter that previews the content of a URL

This is a Flutter URL preview plugin for Flutter that previews the content of a URL

flutter_link_preview This is a URL preview plugin that previews the content of a URL Language: English | 中文简体 Special feature Use multi-processing to

Nov 2, 2022

Flutter liquid swipe - Liquid Swipe Animation Built With Flutter

Flutter liquid swipe - Liquid Swipe Animation Built With Flutter

Flutter Liquid Swipe liquid Swipe animation is amazing and its Created for iOS P

Dec 1, 2022

A candy sorter game made with Flutter for the march flutter challenge.

A candy sorter game made with Flutter for the march flutter challenge.

A candy sorter game made with Flutter for the march flutter challenge.

Apr 9, 2022

✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ A collection of loading indicators animated with flutter. Heavily Inspired by http://tobiasahlin.com/spinkit.

✨ Flutter Spinkit A collection of loading indicators animated with flutter. Heavily inspired by @tobiasahlin's SpinKit. 🎖 Installing dependencies:

Dec 30, 2022
Owner
null
A flutter package which makes it easier to display the difference between two images.

?? Before After A flutter package which makes it easier to display the differences between two images.. The source code is 100% Dart, and everything r

Sahil Kumar 741 Dec 30, 2022
Widgets for creating Hero-like animations between two widgets within the same screen.

flutter_sidekick Widgets for creating Hero-like animations between two widgets within the same screen. Features Hero-like animations. Allow you to spe

Romain Rastel 291 Oct 21, 2022
A small library for creating snapping lists.

snaplist A small cozy library that allows you to make snappable list views. Issues and Pull Requests are really appreciated! Snaplist supports differe

David Leibovych 415 Dec 21, 2022
A Flutter package that two widgets switch with clipper.

Flutter Switch Clipper A Flutter package that two widgets switch with clipper. 使用 使用FillClipper并自定义相关参数 View code SwitchCipper( initSelect: true,

FlutterCandies 23 Jan 3, 2023
Flutter widget that automatically resizes text to fit perfectly within its bounds.

ONLY FOR FLUTTER WEB Flutter widget that automatically resizes text to fit perfectly within its bounds. Show some ❤️ and star the repo to support the

Rebar Ahmad 4 Jan 6, 2022
Flutter ListView and GridView that shows Loading Widgets before the real data is loaded.

loadinglistview This package provide an easy way to show loading indicator(Widget) in a listview or a gridview while the app is still fetching the rea

null 3 Dec 8, 2021
Easily add staggered animations to your ListView, GridView, Column and Row children.

Flutter Staggered Animations Easily add staggered animations to your ListView, GridView, Column and Row children as shown in Material Design guideline

null 1.2k Jan 6, 2023
Beautiful Animated ListView and GridView

staggered_animated_listview Beautiful Animated ListView and GridView Online Preview Getting Started This project is a starting point for a Flutter app

Elyas Sekhavati Nia 1 Dec 11, 2021
A flutter package that adds support for vector data based animations.

animated_vector Description and inspiration A package that adds support for vector data based animations. The data format is heavily inspired from the

Potato Open Sauce Project 6 Apr 26, 2022
✨A clean and lightweight loading/toast widget for Flutter, easy to use without context, support iOS、Android and Web

Flutter EasyLoading English | 简体中文 Live Preview ?? https://nslog11.github.io/flutter_easyloading Installing Add this to your package's pubspec.yaml fi

nslog11 1k Jan 9, 2023