AnimatedList with Dividers

Just as ListView has a ListView.separated() option to create a ListView with custom dividers, AnimatedList should have a similar option to space out the items.

If you can track the length of your list this might be a temporary solution


List<Object> _myList = [];

...


initialItemCount: _myList.length
itemBuilder: (ctx, index, animation) {
  return Column(
      children: [
          YourItem();
          if(index < _myList.length - 1)
          Divider()
      ],
);

another lightweight solution to add a divider strip to the items:

return Container( 
            decoration: BoxDecoration( border: Border(bottom: BorderSide( width: _dividerWidth,  color: _dividerColor) ) ),
            padding: const EdgeInsets.all(_somePadding), 
            child: ListTile() // or any other suitable Widget
 );

How should the separator builder handle the case of an item being inserted or removed?

Implementing the separatorBuilder as just an IndexedWidgetBuilder would mean the separator would suddenly appear or disappear when the child next to it started appearing or stopped disappearing, which is rather jarring.

@Hixie

@Hixie could we pass the animation the separator builder as well? That way developers can decide how the separators should behave. I would really like to use an AnimatedList.seperated :)

@Hixie

Seems plausible.

If anyone would like help developing a PR for this, feel free to ping me (@Hixie) on the #hackers-new channel on Discord! See the contributing docs for details.

Feature: Add AnimatedList with separators (#144899)

@Peetee06

Thanks to @Peetee06 for fixing this one!

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

Navigation Menu

Repository navigation

AnimatedList with Dividers #48226

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

AnimatedList with Dividers #48226

Description

Activity

sanalkv commented on Jun 3, 2020

mregnauld commented on Jan 3, 2021

carman247 commented on May 18, 2021

Crdzbird commented on Sep 19, 2021

christianfrid commented on Dec 7, 2021

K9RYM commented on Mar 12, 2022

DzonaTheSymbol commented on Aug 23, 2022

Hixie commented on Jul 20, 2023

peter-trost commented on Feb 1, 2024

Hixie commented on Feb 1, 2024

Hixie commented on Jun 7, 2024

github-actions commented on Jun 21, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions