diffutil_sliverlist 0.2.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 76

diffutil_sliverlist #

Pub Package

A SliverList that implicitly animates changes.


Widget build(BuildContext context) {
    return CustomScrollView(
             slivers: [
               DiffUtilSliverList<int>(
                 items: list,
                 builder: (context, item) => 
                   Container(
                     color: colors[item % colors.length],
                     height: 48,
                     width: double.infinity,
                 ),
                 insertAnimationBuilder: (context, animation, child) =>
                     FadeTransition(
                       opacity: animation,
                       child: child,
                 ),
                 removeAnimationBuilder: (context, animation, child) =>
                     SizeTransition(
                       sizeFactor: animation,
                       child: child,
                 ),
                 removeAnimationDuration: const Duration(milliseconds: 3000),
                 insertAnimationDuration: const Duration(milliseconds: 1200),
             ),
           ],
         );
}

If list changes, the list will automatically animate new/removed items:

How to use #

Don't mutate the list passed into DiffUtilSliverList yourself #

The widget works by comparing the old list with the new list.

If you have a List<int> list = [1,2,3], pass this to

DiffUtilSliverList<int>(items: list, ...),

and then use something like

setState(() {
  list.add(4);
});

this is not going to work, since you mutated the list and now DiffUtil can't compare the two states of the lists anymore. either copy the list before mutation:

setState(() {
  list = List.from(list); // copy the old list
  list.add(4);
});

Or just copy the list before passing it to DiffUtilSliverList:

DiffUtilSliverList<int>(items: List.from(list), ...),

Mutability #

DiffUtilSliverList operates as if it owns the passed list and mutates the old list it during calculating which items to animate.

This means that the list passed into DiffUtilSliverList needs to be mutable and growable.

So if you first use it with the list [1,2,3], and then with the list [1,2,3,4], it will mutate the fist list with to contents [1,2,3]. Normally, this should not be a problem, as the list is outdated anyway, but if this is a problem in your use case, copy the list before passing it to DiffUtilSliverList.

0.2.1 #

Fix generic type issue

0.2.0+3 #

  • Improve sample

0.2.0+2 #

  • Fix typo in documentation

0.2.0+1 #

  • Documentation fixes

0.2.0 #

  • Breaking Change: Remove Support for custom list-like types, made the API too complex and added too little benefit. If there's need I will add specialized Widgets for custom list types.

  • Fix bug where sometimes a wrong item was animated.

  • Update example

0.1.1 #

Fix example

0.1.0 #

Depend on latest version of diffutil

0.0.2 #

Add more metadata

0.0.1 #

Preview version

example/lib/main.dart

import 'dart:math';

import 'package:diffutil_sliverlist/diffutil_sliverlist.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(const DiffUtilSliverListDemo());

class DiffUtilSliverListDemo extends StatefulWidget {
  const DiffUtilSliverListDemo({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;

  @override
  _DiffUtilSliverListDemoState createState() => _DiffUtilSliverListDemoState();
}

class _DiffUtilSliverListDemoState extends State<DiffUtilSliverListDemo> {
  int _counter = 0;

  List<int> list = [0];

  void _incrementCounter() {
    setState(() {
      _counter++;

      if (Random().nextInt(3) > 0 || list.isEmpty) {
        list = [...list, _counter];
      } else {
        list = [...list];
        list.removeAt(Random().nextInt(list.length));
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          // Here we take the value from the MyHomePage object that was created by
          // the App.build method, and use it to set our appbar title.
          title: Text("DiffUtilSliverList Demo"),
        ),
        body: CustomScrollView(
          slivers: [
            DiffUtilSliverList<int>(
              items: list,
              builder: (context, item) => Container(
                color: colors[item % colors.length],
                height: 48,
                width: double.infinity,
              ),
              insertAnimationBuilder: (context, animation, child) =>
                  FadeTransition(
                opacity: animation,
                child: child,
              ),
              removeAnimationBuilder: (context, animation, child) =>
                  SizeTransition(
                sizeFactor: animation,
                child: child,
              ),
              removeAnimationDuration: const Duration(milliseconds: 3000),
              insertAnimationDuration: const Duration(milliseconds: 1200),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.view_list),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }

  static const colors = [
    Colors.deepOrangeAccent,
    Colors.blueAccent,
    Colors.greenAccent,
    Colors.yellowAccent
  ];
}

Use this package as a library

1. Depend on it

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


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

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

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.6.0 <3.0.0
diffutil_dart ^0.1.0+1 0.1.0+1
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8