'How to reverse listview in Flutter

I implemented a listview which get data from a json.

I followed this implementation.

How could i reverse the order of this listview? (The first element should became the last, ecc...).

listlistviewdartflutterfuture


Solution 1:[1]

You should be able to reverse the list before feeding it to the ListView.

List<String> animals = ['cat', 'dog', 'duck'];
List<String> reversedAnimals = animals.reversed.toList();

Solution 2:[2]

For ListView there is a flag called reverse which is false by default. Change it to true

Solution 3:[3]

In ListView has an attitude is reverse, set it is true to reverse your list:

ListView.builder(
      reverse: true,
);

Solution 4:[4]

Instead of reversing listview, get your list reversed using reversed property or reverse function.

Solution 5:[5]

Here is a solution with null safety support of reverse the listview. Do not use reverse:true because it will reverse your data but when you open listview.builder widget in your app will take you to scroll to the last item. To avoid that use this:-

ListView.builder(                  
                  itemCount: customer?.data.length ?? 0,
                  itemBuilder: (BuildContext context, int index) {
                    int itemCount = customer?.data.length ?? 0;
                    int reversedIndex = itemCount - 1 - index;
                    child: Container(
                     child: Text(value.allCustomerModel!.data![reversedIndex].attributes!.name.toString(),
                      ),)

Solution 6:[6]

just set reverse: true

return MaterialApp(
  home: Scaffold(
    appBar: appBar(),
    body: ListView.builder(
      shrinkWrap: true,
      reverse: true, // here
      itemCount: 5,
      itemBuilder: (context, index){
        return listDesign(index);
      },
    ),
  ),
);

Solution 7:[7]

 ListView.builder(
                       reverse: true,
                       itemCount: 10,
                       padding: EdgeInsets.only(top: 10,bottom: 10),

                       itemBuilder: (context, index){
                             return .....
                          }))

Solution 8:[8]

If your response is a list use it like this to make it work.

response.reversed.toList();

Solution 9:[9]

In Listview Builder Just do one thing

 reverse:true,

Solution 10:[10]

If you want to conditionally reverse the List that you are passing to the ListView, you can use this extension:

extension ListExtension<T> on List<T>{
  List<T> reverse(bool condition){
    return condition ? reversed.toList() : this;
  }
}

and use it as [].reverse(yourCondition) (dont forget to import this extension if you have defined it in some other file)

Related Questions