animated_scroll_item 0.0.3 copy "animated_scroll_item: ^0.0.3" to clipboard
animated_scroll_item: ^0.0.3 copied to clipboard

Wrapper for items inside lists or scrollable views that allows you to customize scroll animation

Wrapper for the scrollable items (e.g. SingleChildScrollView, ListView). It allows you to highly customize behavior of visible items. Based on Flow widget

example     

NOTE: keep in mind it hasn't been tested for large lists

Getting started #

Installing #

dependencies:
  animated_scroll_item: ^0.0.3

Import #

import 'package:animated_scroll_item/animated_scroll_item.dart';

How to use #

Wrap your item widget with AnimatedScrollItem and provide its configuration:

AnimatedScrollItem(
  configs: [
    ItemAnimationConfig(
        // ...animation config
    ),
    ItemAnimationConfig(
        // ...another animation config
    ),
  ],
  size: const Size(double.infinity, 120), // The size is required
  // Provide your widget
  child: SizedBox(
    height: 120,
    child: Card(
      color: Colors.blue,
      child: Center(
        child: Text('$index'),
      ),
    ),
  ),
),

Configuration #

AnimatedScrollItem #

Param Description Type Default value
size The size of space each item takes Size required field
configs List of animation configs, you can define as many as you want, but not less than one List\<ItemAnimationConfig\> required field
child Your list item Widget required field

ItemAnimationConfig #

Param Description Type Default value
itemTransform Callback which defines behavior of animated item based on animation value. ItemTransformAnimation required field
opacityTransform Defines the opacity of animated item based on animation value ItemOpacityTransform null
animationRange Range of position on visible area of list, where item has to be animated. 1 - the end of visible area, 0 - start AnimationRange AnimationRange(min: 0, max: 1)

ItemTransformAnimation #

Callback which provides you animationValue in range from 0 to 1, itemSize also can be useful for your animations, and matrix, the object of Matrix4 on which you have to apply your transforms.

Example:

itemTransform: (
  double animationValue,
  Size size,
  Matrix4 matrix,
) {
  return matrix
    ..scale(animationValue)
    ..setTranslation(
        Vector3(size.width * (1 - animationValue) * .5, 0, 0));
},

ItemOpacityTransform #

This callback allows you to define opacity depending on animationValue

Example:

opacityTransform: (animationValue) => animationValue

AnimationRange #

Here you can define part of visible list where items has to be animated. It takes values from 0 to 1. Example:

animationRange: const AnimationRange(min: 0, max: .1),

Contributing #

Feel free to create PR or open issue :)

6
likes
140
pub points
43%
popularity

Publisher

unverified uploader

Wrapper for items inside lists or scrollable views that allows you to customize scroll animation

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on animated_scroll_item