animated_list_item 1.0.0 copy "animated_list_item: ^1.0.0" to clipboard
animated_list_item: ^1.0.0 copied to clipboard

A flutter package whitch provide Animation of items in ListView, GridView, SliverList, etc.

animated_list_item #

A flutter package whitch provide Animation of items in ListView, GridView, SliverList, etc.

Installing #

Depend on it #

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

dependencies:
  animated_list_item: ^1.0.0

Import it #

Now in your code, you can use:

    import 'package:animated_list_item/animated_list_item.dart';

AnimationType #

all types here 👇: fade,

// flip flipX, flipXTop, flipXBottom, flipY, flipYLeft, flipYRight,

// zoom zoom, zoomLeft, zoomRight,

// rotate rotate, rotateLeft, rotateRight,

// translate slide, shakeX, shakeY,

Example #

preparation 👇

  late AnimationController _animationController;
  List list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  Container item(int index) {
    return Container(
      color: Colors.blue,
      margin: const EdgeInsets.all(8),
      alignment: Alignment.center,
      child: Text("$index"),
    );
  }

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 3000),
      vsync: this,
    );
    _animationController.forward();
  }

flipX #

ListView.builder(
  itemCount: list.length,
  itemBuilder: (context, index) {
    return AnimatedListItem(
      index: index,
      length: list.length,
      aniController: _animationController,
      animationType: AnimationType.flipX,
      child: item(index),
    );
  },
);

flipY #

ListView.builder(
  itemCount: list.length,
  itemBuilder: (context, index) {
    return AnimatedListItem(
      index: index,
      length: list.length,
      aniController: _animationController,
      animationType: AnimationType.flipY,
      child: item(index),
    );
  },
);

zoom #

ListView.builder(
  itemCount: list.length,
  itemBuilder: (context, index) {
    return AnimatedListItem(
      index: index,
      length: list.length,
      aniController: _animationController,
      animationType: AnimationType.zoom,
      child: item(index),
    );
  },
);

slide #

ListView.builder(
  itemCount: list.length,
  itemBuilder: (context, index) {
    return AnimatedListItem(
      index: index,
      length: list.length,
      aniController: _animationController,
      animationType: AnimationType.slide,
      startX: 40,
      startY: 60,
      child: item(index),
    );
  },
);

Note: If you want all items play animation at the same time, you can set their index same value.

14
likes
130
pub points
78%
popularity

Publisher

unverified uploader

A flutter package whitch provide Animation of items in ListView, GridView, SliverList, etc.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on animated_list_item