[Feature Request] AnimatedList equivalent #21
Comments
|
Hi @sm2017. |
Hey there any update of animated list equivalent? |
|
Yea any update with being able to remove items from the list in an animated way? |
|
No updates. But let's reopen the issue in case anyone else has interest. |
EdsonBueno
changed the title
|
@EdsonBueno I am very interested in this, do you know if there is a temporary way to achieve this behavior? |
|
Hi @basketball-ico |
|
Hi, I have not managed to use an animated list. |
|
Would love to see this! |
|
I had a play with this today and took @EdsonBueno advice I tried to implement the bare bones PagedSliverBuilder as per his link here I didn't manage to make it work and I think the problem is here
in the above example the variable finished points to the problem, I don't claim to be an expert so please correct me if I'm wrong, I think we can't return a single item here as we need the full list before we can start to animate it, and by the time its finished I will have a list of widgets not a single widget so this would need a new builder that accepted a list of widgets, happy to learn otherwise, here is my full widget
|
|
Also interested |
|
Also interested on this. I am having a very bad time deleting items from the list |
|
This would have been a great feature to have. Has any one had luck with using custom PagedListView? |
|
Here is my implementation of SliverAnimatedPagedList and an example of how I use it in my code. Im not sure if this is the most optimal way to implement it but I hope that it might help someone. I would appreciate feedback on how to improve it. Keep in mind that I am using Flutter Hooks. SliverAnimatedPagedList implementation: class SliverAnimatedPagedList<T> extends StatelessWidget {
final PagingController<int, T> pagingController;
final PagedChildBuilderDelegate<T> builderDelegate;
final GlobalKey<SliverAnimatedListState> animatedListKey;
const SliverAnimatedPagedList({
super.key,
required this.animatedListKey,
required this.pagingController,
required this.builderDelegate,
});
@override
Widget build(BuildContext context) {
return PagedLayoutBuilder<int, T>(
pagingController: pagingController,
builderDelegate: builderDelegate,
completedListingBuilder: (
BuildContext context,
Widget Function(BuildContext, int) itemWidgetBuilder,
int itemCount,
Widget Function(BuildContext)? noMoreItemsIndicatorBuilder,
) {
return MultiSliver(
children: [
SliverAnimatedList(
key: animatedListKey,
initialItemCount: itemCount,
itemBuilder: (
BuildContext context,
int index,
Animation<double> animation,
) =>
itemWidgetBuilder(
context,
index,
),
),
if (noMoreItemsIndicatorBuilder != null)
SliverToBoxAdapter(
child: noMoreItemsIndicatorBuilder(context),
)
],
);
},
loadingListingBuilder: (
BuildContext context,
Widget Function(BuildContext, int) itemWidgetBuilder,
int itemCount,
Widget Function(BuildContext) newPageProgressIndicatorBuilder,
) {
return MultiSliver(
children: [
SliverAnimatedList(
key: animatedListKey,
initialItemCount: itemCount,
itemBuilder: (
BuildContext context,
int index,
Animation<double> animation,
) =>
itemWidgetBuilder(
context,
index,
),
),
SliverToBoxAdapter(
child: newPageProgressIndicatorBuilder(context),
),
],
);
},
errorListingBuilder: (
BuildContext context,
Widget Function(BuildContext, int) itemWidgetBuilder,
int itemCount,
Widget Function(BuildContext) newPageErrorIndicatorBuilder,
) {
return MultiSliver(
children: [
SliverAnimatedList(
key: animatedListKey,
initialItemCount: itemCount,
itemBuilder: (
BuildContext context,
int index,
Animation<double> animation,
) =>
itemWidgetBuilder(
context,
index,
),
),
SliverToBoxAdapter(
child: newPageErrorIndicatorBuilder(context),
),
],
);
},
layoutProtocol: PagedLayoutProtocol.sliver,
);
}
}An example of how I use it for animating the deletion of items in a notification list: CustomScrollView(
slivers: [
SliverAnimatedPagedList(
animatedListKey: animatedListKey.value,
pagingController: pagingController,
builderDelegate: PagedChildBuilderDelegate<Notification>(
itemBuilder: (context, notification, index) {
final notificationHelper = NotificationHelper.fromType(
type: notification.type,
l: l,
);
return NotificationsCard(
title: notificationHelper.title,
subtitle: notificationHelper.subtitle,
timeStamp: notification.createdAt,
isRead: notification.isRead,
onCardPressed: () => handleNotificationPressed(
notification,
),
onDeletePressed: () => handleNotificationDelete(
notification.id,
),
);
},
firstPageProgressIndicatorBuilder: (context) => const AppLoader(),
newPageProgressIndicatorBuilder: (context) => const AppLoader(
size: 30,
),
noItemsFoundIndicatorBuilder: (context) => NotificationsEmpty(),
),
),
],
);Create an instance of the GlobalKey which is going to be used to perform actions on the SliverAnimatedList final animatedListKey = useState(GlobalKey<SliverAnimatedListState>());Inside of your function which performs the deletion update the SliverAnimatedList and the PagingController animatedListKey.value.currentState!.removeItem(
duration: const Duration(milliseconds: 200),
index,
(context, animation) {
final notificationHelper = NotificationHelper.fromType(
type: notification.type,
l: l,
);
return NotificationsCard(
animation: animation,
title: notificationHelper.title,
subtitle: notificationHelper.subtitle,
timeStamp: notification.createdAt,
isRead: notification.isRead,
onCardPressed: () {},
onDeletePressed: () {},
);
},
);
pagingController.itemList = pagingController.itemList
?.where((element) => element.id != args['id'])
.toList();Don't forget to add the transition of your liking to the item widget Widget build(BuildContext context, WidgetRef ref) {
return SizeTransition(
sizeFactor: animation ?? const AlwaysStoppedAnimation(1),
child: FadeTransition(
opacity: animation ?? const AlwaysStoppedAnimation(1),
child: ...
} |
|
I found a simple way by using AnimatedSwitcher for the item tile, Consider if it's useful When remove item Example EXAMPLE.mov |
Is there any
AnimatedListequivalent?The text was updated successfully, but these errors were encountered: