AnimatedList widget and Attributes

AnimatedList widget and Attributes

ยท

2 min read

The AnimatedList widget in Flutter is used to create a scrollable list of items with animation support for adding, removing, or updating list items. It's ideal for situations where you want to animate changes to a list dynamically.

Attributes:

  1. key (Key):

    • An optional key to identify the AnimatedList widget uniquely.
  2. initialItemCount (int):

    • The initial number of items in the list.
  3. scrollDirection (Axis):

    • The axis along which the list scrolls. It can be either Axis.horizontal for a horizontal list or Axis.vertical for a vertical list. The default value is Axis.vertical.
  4. padding (EdgeInsetsGeometry?):

    • The padding around the list.
  5. reverse (bool):

    • Whether the list should be displayed in reverse order. If true, the items will be displayed in the reverse order of their appearance in the list.
  6. primary (bool):

    • Whether the AnimatedList is the primary scroll view associated with the parent widget. Defaults to true.
  7. physics (ScrollPhysics?):

    • Determines the physics of the scroll behavior, such as the scrolling speed and bounce effect.

Example:

import 'package:flutter/material.dart';

class AnimatedListExample extends StatefulWidget {
  @override
  _AnimatedListExampleState createState() => _AnimatedListExampleState();
}

class _AnimatedListExampleState extends State<AnimatedListExample> {
  final GlobalKey<AnimatedListState> _listKey = GlobalKey<AnimatedListState>();
  List<String> _listItems = ['Item 1', 'Item 2', 'Item 3'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AnimatedList Widget Example'),
      ),
      body: AnimatedList(
        key: _listKey,
        initialItemCount: _listItems.length,
        itemBuilder: (context, index, animation) {
          return _buildListItem(_listItems[index], animation);
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _addItem();
        },
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _buildListItem(String item, Animation<double> animation) {
    return SizeTransition(
      sizeFactor: animation,
      child: ListTile(
        title: Text(item),
      ),
    );
  }

  void _addItem() {
    final newIndex = _listItems.length;
    _listItems.add('Item ${newIndex + 1}');
    _listKey.currentState!.insertItem(newIndex);
  }
}

void main() {
  runApp(MaterialApp(
    home: AnimatedListExample(),
  ));
}

Explanation:

  • In this example, we create an AnimatedList widget with a list of items.

  • The list items are defined as a list of strings _listItems.

  • We use a SizeTransition widget to animate the size of each list item as it's added to the list.

  • The _addItem function is called when the FloatingActionButton is pressed, which adds a new item to the list and animates its appearance using insertItem method of AnimatedListState.

  • This example demonstrates how to use AnimatedList to create a dynamic list with animation support for adding items.

Did you find this article valuable?

Support Vinit Mepani (Flutter Developer) by becoming a sponsor. Any amount is appreciated!

ย