Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reverse list in ListView.builder in Flutter

I wanted to reverse list and I have achieved this by using reverse: true,. It is working, but the list has aligned to the bottom and showing blank space at the top when the list has least items.

 Expanded(child:  ListView.builder(
                shrinkWrap: true,
                reverse: true,
                controller: _scrollController,
                itemCount:order_response.orderDetails.length,
                itemBuilder: (context, position) {return orderListItemTile(width,height,order_response,position);},
              ),)

enter image description here

But when I deleted expanded() widget, when items increase then it overflows by pixel.

 ListView.builder(
            shrinkWrap: true,
            reverse: true,
            controller: _scrollController,
            itemCount:order_response.orderDetails.length,
            itemBuilder: (context, position) {return orderListItemTile(width,height,order_response,position);},
          ),

enter image description here

like image 789
Farhana Naaz Ansari Avatar asked Mar 11 '19 05:03

Farhana Naaz Ansari


People also ask

How do you reverse a list in DART flutter?

Reverse Dart List in-place by Swapping in For Loop. We can use a for loop to iterate till the middle of the list and for each iteration we swap the element at the index with the element at the N-1-index . As we doing this in the original list, the original list will finally have the reversed list.

What is the difference between ListView and ListView builder?

builder() renders the only items that are visible in the screen which means that this renders the item as per the requirement. Here, Listview is efficient when we have less number of items where as Listview. builder is efficient for large number of items.

What is ListView separator flutter?

ListView. separated creates a fixed-length, scrollable , linear array of list “items” separated by list item “separators”. The itemBuilder callback is called whenever there are indices ≥ 0 and< itemCount .


2 Answers

Apart from reversing the list, another solution could be putting the ListView inside an Align widget with alignment: Alignment.topCenter . Also shrinkWrap: true needed inside ListView.

         Align(
            alignment: Alignment.topCenter,
            child: ListView.builder(
              reverse: true,
              shrinkWrap: true,
              ...
              ...
           )
         )
like image 130
Newaj Avatar answered Sep 16 '22 22:09

Newaj


Reverse your list using:

var reversedList = _response.orderDetails.reversed.toList();
like image 30
Amadej Kastelic Avatar answered Sep 18 '22 22:09

Amadej Kastelic