A Flutter ListView that implicitly calculates the changes between two lists using the MyersDiff algorithm and animates between them for you

Overview

Implicitly Animated Reorderable List

This is a fork. Original project repository was deleted.

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:
  animated_list:
    git: https://github.com/vaetas/animated_list.git

Install packages from the command line

flutter packages get

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.

You might also like...

Dart library with stack blur algorithm for RGBA images

stack_blur The Dart library for blurring images with the Stack blur algorithm. T

Nov 19, 2022

BankGit helps you manage your account and transactions more efficiently by breaking your account into branches for various purposes and then making transactions directly from them.

BankGit helps you manage your account and transactions more efficiently by breaking your account into branches for various purposes and then making transactions directly from them.

Bank Git Web Hosted Here : https://bank-management-45848.web.app/ Bank Git is an application built with Flutter and Firebase to help you manage your b

Dec 26, 2022

Yoga training app using flutter,This project consist of two Screens.

Yoga training app using flutter,This project consist of two Screens.

Yoga Training App Watch it on YouTube Yoga training app using flutter,This proje

Jan 2, 2022

About This is Personal Expenses Planner. You can add your expenses in to the app and manage your transaction. and you can see How much did you spend on which day. I developed this project using flutter.

expense_planner A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Jul 6, 2022

A Flutter application for Muslims that help them challenge and motivate themselves and their friends to read Azkar in a fun way.

A Flutter application for Muslims that help them challenge and motivate themselves and their friends to read Azkar in a fun way.

A Flutter application for Muslims that help them challenge and motivate themselves and their friends to read Azkar in a fun way.

Oct 30, 2022

One codebase two platforms more privacy for the world 😎

Privyet A Privacy focused social media app. Getting Started This project is a starting point for a Flutter application. A few resources to get you sta

Jun 3, 2021

Obfuscate sensitive data in your pictures before sharing them online.

Privacy Blur A cross-platform application to obfuscate sensitive data from images, targeting iOS and Android devices. Mainly written in dart with the

Dec 30, 2022

Let me go is a mobile application which drivers can be notified when an Ambulance is near to them in a traffic.

Let me go is a mobile application which drivers can be notified when an Ambulance is near to them in a traffic.

Let Me Go Let Me Go is a mobile application which was build in order to notify vehicle drivers when an ambulance is near to them within a specific dis

Dec 19, 2021

Basic banking app - A Banking App that allow transfer money between multiple customers using SQLite database

Basic banking app - A Banking App that allow transfer money between multiple customers using SQLite database

basic_banking_app A Basic Banking App that allow transfer money between multiple

Feb 10, 2022
Owner
Vojtech Pavlovsky
Flutter & Dart developer.
Vojtech Pavlovsky
E-Studying-V1 - Flutter application where you can download files from an api and unarchive them and open them and see their contents

E-Studying-V1 - Flutter application where you can download files from an api and unarchive them and open them and see their contents

Chakib Ammar Aouchiche 0 Jan 20, 2022
IIITB Hogwarts is a project which aims at increasing students' interest in creating projects and giving them a platform to share them with others.

IIITB-Hogwarts This is going to be fun project for our college students. Thinking of bringing Harry Potter style group division into college. This is

Kartik Pant 5 Nov 9, 2022
Calculates the convex hull of a given set of points.

Calculates the convex hull of a given set of points. Monotone chain is used as algorithm. Info Given a set of points, the convex hull is a subset of p

Daniel 2 Sep 7, 2022
An app that records, changes, and plays audio.

voice_changer Voice Changer Application Getting Started This is an application that records, plays, and changes the properties of sound (like pitch an

Haidar 17 Oct 13, 2022
This pub lets you share any kind of files (csv, mp4, png etc), take screenshot of the widgets you want and return as Image and share them directly as well in the form of an image.

share_files_and_screenshot_widgets This pub lets you share any kind of files (csv, mp4, png etc), take screenshot of the widgets you want and return a

Jay Mehta 22 Dec 28, 2022
A app made with Flutter, which allows user to lookup time of any major city in the world. The UI also changes its background according to the time.

first_flutter_project A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

Laksh Mittal 0 Oct 31, 2021
Dart package to rank proposals according to Majority Judgment, using a score-based algorithm for performance and scalability

Majority Judgment for Dart This Dart package helps to resolve polls using Majority Judgment. Features Efficient Majority Judgment algorithm, scales we

Mieux Voter 1 Oct 18, 2021
Algorithm Toolbox is an Android app for C++, Python and DART algorithms. It shows the codes as well as its explanation with various examples.

AlgoKing Algorithm Toolbox is an Android app for C++, Python and DART algorithms. It shows the codes as well as its explanation with various examples.

Hash Studios 5 Sep 13, 2022
Algorithm for choosing the best seats in a cinema. Made in dart.

Buy movie tickets algorithm This dart project contains an algorithm to choose the better seats on the cinema. Also contains a bot to buy movie tickets

Chris Chávez 1 Dec 2, 2021
AES 256 GCM encryption algorithm in Dart

aes-256-gcm-dart AES 256 GCM encryption algorithm in Dart Use var text = 'SOME D

Swifty 8 Nov 11, 2022