AnimatedListState Widget – Flutter Widget Guide By Flutter Agency

AnimatedListState Widget – Flutter Widget Guide By Flutter Agency

In this of Animated, we have been through widgets like AnimatedCrossFade Widget, AnimatedBuilder Widget, AnimatedDefaultTextStyle Widget, so now in this article, we will learn about AnimatedListState Widget with a code sample.

What is AnimatedListState Widget in Flutter?

AnimatedListState Widget is the state for a scrolling container that animates items when they are inserted or removed.

When an item is inserted with insertItem an animation begins running. The animation is passed to AnimatedList.itemBuilder whenever the item’s widget is needed.

When an item is removed with removeItem its animation is reversed. The removed item’s animation is passed to the removeItem builder parameter.

How to use AnimatedListState Widget in Flutter?

The following code snippet tells us how to implement AnimatedListState in Flutter.

AnimatedListState()

To implement the code users are requested to install the first package as below:

english_words: 3.1.5

import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';

class AnimatedListStateWidget extends StatefulWidget {
  @override
  _AnimatedListStateWidgetState createState() =>
      _AnimatedListStateWidgetState();
}

class _AnimatedListStateWidgetState extends State<AnimatedListStateWidget> {
  final GlobalKey<AnimatedListState> _listKey = GlobalKey();

  List<String> _data = [
    WordPair.random().toString(),
    WordPair.random().toString(),
    WordPair.random().toString(),
    WordPair.random().toString(),
    WordPair.random().toString(),
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      persistentFooterButtons: <Widget>[
        RaisedButton(
          child: Text(
            'Add an item',
            style: TextStyle(fontSize: 20, color: Colors.white),
          ),
          onPressed: () {
            _addAnItem();
          },
        ),
        RaisedButton(
          child: Text(
            'Remove last',
            style: TextStyle(fontSize: 20, color: Colors.white),
          ),
          onPressed: () {
            _removeLastItem();
          },
        ),
        RaisedButton(
          child: Text(
            'Remove all',
            style: TextStyle(fontSize: 20, color: Colors.white),
          ),
          onPressed: () {
            _removeAllItems();
          },
        ),
      ],
      body: AnimatedList(
        key: _listKey,
        initialItemCount: _data.length,
        itemBuilder: (context, index, animation) =>
            _buildItem(context, _data[index], animation),
      ),
    );
  }

  Widget _buildItem(
      BuildContext context, String item, Animation<double> animation) {
    TextStyle textStyle = new TextStyle(fontSize: 20);

    return Padding(
      padding: const EdgeInsets.all(2.0),
      child: SizeTransition(
        sizeFactor: animation,
        axis: Axis.vertical,
        child: SizedBox(
          height: 50.0,
          child: Card(
            child: Center(
              child: Text(item, style: textStyle),
            ),
          ),
        ),
      ),
    );
  }

  void _addAnItem() {
    _data.insert(0, WordPair.random().toString());
    _listKey.currentState.insertItem(0);
  }

  void _removeLastItem() {
    String itemToRemove = _data[0];

    _listKey.currentState.removeItem(
      0,
      (BuildContext context, Animation<double> animation) =>
          _buildItem(context, itemToRemove, animation),
      duration: const Duration(milliseconds: 250),
    );

    _data.removeAt(0);
  }

  void _removeAllItems() {
    final int itemCount = _data.length;

    for (var i = 0; i < itemCount; i++) {
      String itemToRemove = _data[0];
      _listKey.currentState.removeItem(
        0,
        (BuildContext context, Animation<double> animation) =>
            _buildItem(context, itemToRemove, animation),
        duration: const Duration(milliseconds: 250),
      );

      _data.removeAt(0);
    }
  }
}

In the above code, we have used an insert item() and remove item()  Above code will give us output like below:

AnimatedListState

Conclusion:

In this article, we have been through What is AnimatedListState Widget in Flutter along with how to implement it in a Flutter.

Thanks for being with us!!!
Keep learning.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.