CODEWITHSUNDEEP
listlistviewdartflutterfuture
Dev9977
Dev9977

Reputation: 1281

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

Upvotes: 55

Views: 72282

Answers (12)

Mazhar Niaz
Mazhar Niaz

Reputation: 101

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,
         );
        },
      ),

Upvotes: 3

Srabon Bapari
Srabon Bapari

Reputation: 1

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

Upvotes: 0

Lokendra singh Chauhan
Lokendra singh Chauhan

Reputation: 161

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

`

Upvotes: 1

Sabahat Hussain Qureshi
Sabahat Hussain Qureshi

Reputation: 1364

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

Upvotes: 1

ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ
ᴅ ᴇ ʙ ᴊ ᴇᴇ ᴛ

Reputation: 519

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(),
                      ),)

Upvotes: 8

Hakan hakan
Hakan hakan

Reputation: 1

      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);
  }

Upvotes: 0

Moch Alfian
Moch Alfian

Reputation: 1

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())
   ]
])

Upvotes: 0

NullByte08
NullByte08

Reputation: 1032

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)

Upvotes: 0

Nhật Trần
Nhật Trần

Reputation: 2838

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

ListView.builder(
      reverse: true,
);

Upvotes: 33

Dinesh Balasubramanian
Dinesh Balasubramanian

Reputation: 21748

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

Upvotes: 39

chemamolins
chemamolins

Reputation: 20558

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

Upvotes: 129

Santhosh Joseph
Santhosh Joseph

Reputation: 934

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

Upvotes: 3

Related Questions