Skip to main content

Command Palette

Search for a command to run...

AnimatedList widget and Attributes

Published
2 min read
AnimatedList widget and Attributes
V

"Hello World, I'm Vinit Mepani, a coding virtuoso driven by passion, fueled by curiosity, and always poised to conquer challenges. Picture me as a digital explorer, navigating through the vast realms of code, forever in pursuit of innovation.

In the enchanting kingdom of algorithms and syntax, I wield my keyboard as a magical wand, casting spells of logic and crafting solutions to digital enigmas. With each line of code, I embark on an odyssey of learning, embracing the ever-evolving landscape of technology.

Eager to decode the secrets of the programming universe, I see challenges not as obstacles but as thrilling quests, opportunities to push boundaries and uncover new dimensions in the realm of possibilities.

In this symphony of zeros and ones, I am Vinit Mepani, a coder by passion, an adventurer in the digital wilderness, and a seeker of knowledge in the enchanting world of code. Join me on this quest, and let's create digital wonders together!"

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.

More from this blog

Vinit Mepani (Flutter Developer)

270 posts

"Vinit Mepani, passionate coder! Dive into my Dart and Flutter journey on the blog. Let's master these tech wonders together. Happy coding! 🚀"