animated_item

A Flutter plugin that animates ListView and PageView items on scroll.

Previews

Animated item for [ListViews]

Animated page for [PageViews]

Installation

Add animated_item as a dependency in your pubspec.yaml file.

animated_item: ^<latest-version>

Usage

AnimatedItem uses the ScrollController’s scroll offset to animate child in a [ListView].

ListView.builder(
  itemCount: colors.length,
  scrollDirection: Axis.horizontal,
  controller: _scaleController,
  itemBuilder: (context, index) {
    return AnimatedItem(
      controller: _scaleController,
      index: index,
      effect: const ScaleEffect(),
      child: Container(
        margin: const EdgeInsets.all(5.0),
        width: width,
        decoration: BoxDecoration(
          color: colors[index],
          borderRadius: _borderRadius),
      )
    );
  },
)

AnimatedPage uses the PageController’s scroll offset to animate child in a [PageView].

PageView.builder(
  controller: _scaleController,
  itemCount: colors.length,
  itemBuilder: (context, index) {
    return AnimatedPage(
      controller: _scaleController,
      index: index,
      effect: const ScaleEffect(),
      child: Container(
        margin: const EdgeInsets.all(5.0),
        width: width,
        decoration: BoxDecoration(
          color: colors[index], 
          borderRadius: _borderRadius),
      )
    );
  },
)

Customization

Here is a list of properties available to customize your effect:

Name Type Description
type AnimationType Determines start and end of effect.
snap bool If active snaps back to original position when not scrolling.
animationAxis Axis Animation axis for [TranslateEffect].
startOffset int The animation start offset for [TranslateEffect]. Use negative numbers to reverse translate.
alignment AlignmentGeometry The alignment of the origin, relative to the size of the child.
verticalScale double Scale effect vertically.
horizontalScale double Scale effect horizontally.
rotationAngle double Rotation angle for [RotateEffect].
opacity double Opacity determines how faded the item becomes. Higher numbers results to more fading.

Contributions

Contributions of any kind are more than welcome! Feel free to fork and improve animated_item in any way you want, make a pull request, or open an issue.

Support the Library

You can support the library by liking it on pub, staring in on Github and reporting any bugs you encounter.

GitHub

View Github