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:
key (Key):
- An optional key to identify the AnimatedList widget uniquely.
initialItemCount (int):
- The initial number of items in the list.
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.
padding (EdgeInsetsGeometry?):
- The padding around the list.
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.
primary (bool):
- Whether the
AnimatedList
is the primary scroll view associated with the parent widget. Defaults to true.
- Whether the
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.