The-ring-io / flutter_staggered_animations

Easily add staggered animations to your ListView, GridView, Column and Row children.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Animation does not work in FutureBuilder

MustafaAdam opened this issue · comments

Maybe it's something I'm doing on my end, but I couldn't get it to work on list inside a FutureBuilder
Apologies for the indentation :)

return ListView.builder(
                            itemCount: items.length + 1,
                            itemBuilder: (context, index) {
                              if (index == 0) {
                                return Container(
                                  margin: EdgeInsets.all(10),
                                  padding: EdgeInsets.all(7),
                                  child: Row(
                                    children: [
                                      Text('Number'),
                                      Text('Name'),
                                      Text('Price')
                                    ],
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                  ),
                                );
                              }
                              index--;
                              final currentItem = items[index];

                              return AnimationConfiguration.staggeredList(
                                position: index,
                                duration: const Duration(milliseconds: 400),
                                child: SlideAnimation(
                                  verticalOffset: 50,
                                  horizontalOffset: 100,
                                  child: FadeInAnimation(
                                    child: Card(
                                      child: ListTile(
                                        leading: Text('${index + 1}'),
                                        title: Center(
                                            child: Text(currentItem['name'])),
                                        subtitle: Center(
                                            child: Text(
                                                '''Bought ${currentItem["count"]} times for a total of ${currentItem['price'] * currentItem["count"]} dirhams''')),
                                        trailing:
                                            Text('${currentItem["price"]} Dhs'),
                                      ),
                                    ),
                                  ),
                                ),
                              );
                            },
                          );

I got it to work. My AnimationLimiter was at the top of widgets on this page.
Once I put right above the listview.builder it worked.
This is gorgeous. Thanks man.