How to reverse listview in Flutter

Question

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...).

Tap

Please Refer this link : Reverse of List in Listview Flutter – Guess

Answer 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();

Croaky

Answer 2

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

Took

No. at some point your list is not reverse by using reverse : true. It started pointing your all list from bottom of Listview. So better is to reverse your array. – Guess

Answer 3

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

ListView.builder(
      reverse: true,
);

Getupandgo

This reverse:true takes to the last element of the list when clicked, so this is not the perfect solution. – Repeater

Answer 4

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 it will take automatically 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(),
                      ),)

Rucksack

Answer 5

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

Whittaker

Answer 6

You can reverse the order of your list before returning the ListView element.

ListView.separated(
    itemCount: widget.orderList.length,
    itemBuilder: (context, index) {
       final reversed = widget.orderList.reversed.toList(); // reverse your list here
       final item = reversed[index]; // assign it with index
       return Text(
           item.name, // the item name in my list
          ),
      },
      // The separators
      separatorBuilder: (context, index) {
         return const Divider(
            color: Colors.grey,
         );
        },
      ),

Paperback

Answer 7

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)

Impenitent

Answer 8

You can reverse it simply like it ==>>

ListView.builder(
                      itemCount: snapshot.data!.length,
                      itemBuilder: (context, index) {
                        var reverselist = snapshot.data!.reversed.toList();

and Then can be used as ==>

     Text(
             reverselist[index]
                                            .tituloCategoria
                                            .toString(),
                                                                            

                                        overflow: TextOverflow.ellipsis,
                                      ),

`

Endow

Answer 9

Example :

List data = [
     {
        "number" : 1,
        "iterator" : 0
     },
     {
        "number" : 2,
        "iterator" : 1
     },
     {
        "number" : 3,
        "iterator" : 2
     },
   ];

**On ListView ... **

ListView(children: [
   for (var i = data.length; i > 0; i--) ... [
      Text(data[i]["number"].toString())
   ]
])

Cunaxa

Answer 10

      List<int> number1 = List.empty(growable: true);
  if (number1.isEmpty) {
    number1.add(2);
    number1.add(9);
    number1.add(5);
    number1.add(6);
    print(number1);
    number1.sort();
    number1=number1.reversed.toList();
    print(number1);
  }

Ringleader

Please explain your answer, otherwise this post may get deleted – Hoarse

Why check if the list is empty? You literally just created it. And why sort? That changes the order of the original array. – Charmainecharmane

Answer 11

List<int> numbers = [1, 2, 3, 4, 5, 6, 7];
List<int> reversedNumbers = numbers.reversed.toList();

Independence

Though we thank you for your answer, it would be better if it provided additional value on top of the other answers. In this case, your answer does not provide additional value, since another user already posted that solution. If a previous answer was helpful to you, you should vote it up once you have enough reputation – Yelena

Answer 12

SingleChildScrollView(
      reverse: false,
      child: ListView.builder(
        shrinkWrap: true,
        reverse: true,
        physics: NeverScrollableScrollPhysics(),
        itemCount: 10,
        itemBuilder: (context, index){
          return Container();
        },
      ),
    )

Aufmann

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Gog