How to remove item in flutter Animated list

Making Widget Build territory and afterward we would make 1 Text gadget and 1 TextField gadget.

The issue

Rundown see all in all is exceptionally fundamental in any front end system. It contains the rundown of information called things to be shown to the client. There is a high possibility that thing in elite might be added, eliminated, and changed. Presently the issue is at whatever point any thing added or eliminated in the middle of the rundown while the client is cooperating with it, This abrupt change in some cases can make disarray to the client.

The arrangement

The basic arrangement is to give a visual encounter of things being added or taken out by enlivening it. πŸ‘

Let’s try to build something like this.

Enlivened Widget Code resembles this

AnimatedList(
  itemBuilder: (context, index, animation) {
    return slideIt(context, index, animation);
  },
)

Properties:

β—‰ itemBuilder: This is the necessary boundary and is utilized to fabricate things in top notch. You can just restore a gadget of your decision to fabricate any thing and they will be possibly manufactured when they are looked into the view. Since we are managing movement, we get an activity object that will be utilized by the thing to vitalize.

β—‰ regulator: This is utilized to control the parchment position of the rundown.

β—‰ key: This is needed on the off chance that we have to get to the AnimatedList from outside and not from inside the thing itself.

β—‰ initialItemCount: It is utilized to stack beginning things when the rundown is stacked. These underlying things won’t be enlivened. It defaults to 0.

β—‰ scrollDirection: It chooses the looking over practices of things.

// Items can be scrolled only bottom to top and vica versa.
scrollDirection: Axis.vertical,
// Items can be scrolled only left to right and vica versa.
scrollDirection: Axis.horizontal,

β—‰ invert: This is utilized to choose whether the rundown will be looked the understanding way. It defaults to bogus. In the App as a matter of course, the perusing bearing is left-to-right so the rundown will be looked over left to right. In the event that we set this banner to valid, the rundown will look in an option to-left heading (inverse).

β—‰ essential: In iOS when we click on the status bar the rundown will look to top. It defaults to genuine when the parchment heading is vertical and the regulator is invalid.

β—‰ material science: It chooses how the parchment ought to act on client input.

β—‰ shrinkWrap: It is utilized to choose whether the size (degree) of the rundown should take full accessible space or match it to the size of things in the rundown.

β—‰ cushioning: This essentially includes cushioning around the things the rundown.

We should make it work bit by bit

Step ➊: Prepare factors

/// Will used to access the Animated list 
final GlobalKey<AnimatedListState> listKey = GlobalKey<AnimatedListState>();
/// This holds the items
List<int> _items = [];
/// This holds the item count
int counter = 0;

Step βž‹: Deploy the AnimatedList.

AnimatedList(
  key: listKey,
  initialItemCount: _items.length,
  itemBuilder: (context, index, animation) {
    return slideIt(context, index, animation); // Refer step 3
  },
)

Step ➌: Write a gadget to show as Items in top notch.

Widget slideIt(BuildContext context, int index, animation) {
  int item = _items[index];
  TextStyle textStyle = Theme.of(context).textTheme.headline4;
  return SlideTransition(
    position: Tween<Offset>(
      begin: const Offset(-1, 0),
      end: Offset(0, 0),
    ).animate(animation),
    child: SizedBox( // Actual widget to display
      height: 128.0,
      child: Card(
        color: Colors.primaries[item % Colors.primaries.length],
        child: Center(
          child: Text('Item $item', style: textStyle),
        ),
      ),
    ),
  );
}

Note: ✍

The primary thing gadget i.e SizedBox is wrapped inside SlideTransition. SlideTransition needs the object of Animation and we are getting the object of Animation so we use .vivify technique to change over it.

Step ➍: Insert the Item.

listKey.currentState.insertItem(0,
    duration: const Duration(milliseconds: 500));
_items = []
  ..add(counter++)
  ..addAll(_items);

For this model, we are adding any new thing to the main list.

Step ➎: Remove the Item.

listKey.currentState.removeItem(
    0, (_, animation) => slideIt(context, 0, animation),
    duration: const Duration(milliseconds: 500));
_items.removeAt(0);

Additionally eliminating it from the main list as it were.

Note: ✍

At whatever point we embed the thing in the vivified list we ought to likewise refresh the genuine rundown.

While eliminating the thing in sync 5 we additionally need to pass a similar gadget which is utilized to make things since when AnimatedList eliminates the thing, Its list is not, at this point accessible yet at the same time, it needs the UI of that thing to vitalize this way (_, movement) => slideIt(context, 0, liveliness).

How do we add curves to animation?

CurvedAnimation is here to the salvage.

CurvedAnimation is valuable when you need to apply a non-straight Curve to an activity object, particularly in the event that you need various bends when the movement is going ahead versus when it is moving in reverse.

SlideTransition(
  position: Tween<Offset>(
    begin: const Offset(-1, 0),
    end: Offset(0, 0),
  ).animate(CurvedAnimation(
      parent: animation,
      curve: Curves.bounceIn,
      reverseCurve: Curves.bounceOut)),
  child: SizedBox(
    height: 128.0,
    child: Card(
      color: Colors.primaries[item % Colors.primaries.length],
      child: Center(
        child: Text('Item $item', style: textStyle),
      ),
    ),
  ),
);

Rather than simply passing movement, we pass CurvedAnimation with the necessary bend. Furthermore, the outcome resembles this.

You see things skipping on section and exit. Isn’t that so?

Various sorts of movement

So far we have seen the thing is simply entering from left to right and taking way out the converse way. This is on the grounds that we have utilized the SlideTransition gadget.

You can make any liveliness for the thing that you can consider. The gadget you pick will simply need to acknowledge the object of Animation

Resize the thing ↕

Widget sizeIt(BuildContext context, int index, animation) {
  int item = _items[index];
  TextStyle textStyle = Theme.of(context).textTheme.headline4;
  return SizeTransition(
    axis: Axis.vertical,
    sizeFactor: animation,
    child: SizedBox(
      height: 128.0,
      child: Card(
        color: Colors.primaries[item % Colors.primaries.length],
        child: Center(
          child: Text('Item $item', style: textStyle),
        ),
      ),
    ),
  );
}

The sizeFactor property acknowledges the Animation which we can without much of a stretch pass what we have from the itemBuilder.

Rotate the item ⟳

Widget rotateIt(BuildContext context, int index, animation) {
  int item = _items[index];
  TextStyle textStyle = Theme.of(context).textTheme.headline4;
  return RotationTransition(
    turns: animation,
    child: SizedBox(
      height: 128.0,
      child: Card(
        color: Colors.primaries[item % Colors.primaries.length],
        child: Center(
          child: Text('Item $item', style: textStyle),
        ),
      ),
    ),
  );
}

Slide, Resize, and Rotate the item together. β†’β†•βŸ³

SlideTransition(
  position: Tween<Offset>(
    begin: const Offset(-1, 0),
    end: Offset(0, 0),
  ).animate(animation),
  child: RotationTransition(
    turns: animation,
    child: SizeTransition(
      axis: Axis.vertical,
      sizeFactor: animation,
      child: SizedBox(
        height: 128.0,
        child: Card(
          color: Colors.primaries[item % Colors.primaries.length],
          child: Center(
            child: Text('Item $item', style: textStyle),
          ),
        ),
      ),
    ),
  ),
);

Step by step instructions to enliven the things delivered at first.

At this moment AnimatedList can enliven things that are added or eliminated after the underlying rundown is shown. To invigorate the underlying things that are now present in the rundown, You can physically add things in top notch after a deferral.

Image for post
Future<void> _loadItems() async {
  for (int item in _fetchedItems) {
    // 1) Wait for one second
    await Future.delayed(Duration(milliseconds: 1000));
    // 2) Adding data to actual variable that holds the item.
    _items.add(item);
    // 3) Telling animated list to start animation
    listKey.currentState.insertItem(_items.length - 1);
  }
}

That’s it. I hope you have learned something new from this article.

Thanks for reading.

Leave a Comment