Giter VIP home page Giter VIP logo

animated-stream-list's Introduction

Animated Stream List

pub package Build Status

A Flutter library to easily display a list with animated changes from a Stream<List<E>>.
It's like StreamBuilder + ListView.Builder with animations.
Taken inspiration from the Animated List Sample and Java-diff-utils

Getting Started

1. Add dependency to your pubspec.yaml

dependencies:
  animated_stream_list: ^1.1.0

2. Import it

import 'package:animated_stream_list/animated_stream_list.dart';

3. Use it. See the examples folder for an ... example.

Parameters

@required Stream<List<E>> streamList;
@required AnimatedStreamListItemBuilder<E> itemBuilder; 
@required AnimatedStreamListItemBuilder<E> itemRemovedBuilder; 
Duration duration;

AnimatedStreamListItemBuilder<T> is just a function which builds a tile

typedef Widget AnimatedStreamListItemBuilder<T>(
  T item,
  int index,
  BuildContext context,
  Animation<double> animation,
); 

Example

// create tile view as the user is going to see it, attach any onClick callbacks etc. 
Widget _createTile(String item, Animation<double> animation) {    
 return SizeTransition(      
    axis: Axis.vertical,      
    sizeFactor: animation,      
    child: const Text(item),    
  ); 
}

// what is going to be shown as the tile is being removed, usually same as above but without any 
// onClick callbacks as, most likely, you don't want the user to interact with a removed view 
Widget _createRemovedTile(String item, Animation<double> animation) {    
 return SizeTransition(      
    axis: Axis.vertical,      
    sizeFactor: animation,      
    child: const Text(item),    
  ); 
}

final Stream<List<String>> list = // get list from some source, like BLOC  
final animatedView = AnimatedStreamList<String>(      
  streamList: list,      
  itemBuilder: (String item, int index, BuildContext context, Animation<double> animation) =>      
    _createTile(item, animation),      
  itemRemovedBuilder: (String item, int index, BuildContext context, Animation<double> animation) =>  
    _createRemovedTile(item, animation), 
  ); 
} 

Options

List<E> initialList;

Initial list

Equalizer equals; 

Compares items for equality, by default it uses the == operator, it's critical this works properly.

Equalizer is function, that, given two items of the same type, returns true if they are equal, false otherwise

typedef bool Equalizer(dynamic item1, dynamic item2); 

You can check the Animated List Documentation for the rest:

Axis scrollDirection;
bool reverse;
ScrollController scrollController;
bool primary;
ScrollPhysics scrollPhysics;
bool shrinkWrap;
EdgeInsetsGeometry padding;

Credits

This amazing package was originally created by Dawid Bota over here. I have taken over the development with his blessing and all tracking will be done on this repo moving forward.

animated-stream-list's People

Contributors

adithyaxx avatar ened avatar hacker1024 avatar otsoaunloco avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.