Flutter: reversed stacking for a listView

user_17219508 0
Viewed 48

I would like to change the stacking order in listView.builder so that Item 0 should be placed at the top of the "stack" and the last item of the list - at the bottom.

Here is the default behavior

default behavior

default behavior

Here is what I want to achieve

I want to get

My code

@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('ListView stacking'),
        ),
        body: ListView.builder(
          itemCount: 20,
          itemBuilder: (context, index) {
            return Align(
              child: Card(
                color: Colors.primaries[random.nextInt(Colors.primaries.length)]
                    [random.nextInt(9) * 100],
                child: Container(
                  width: 100,
                  child: Text('Item $index', style: TextStyle(fontSize: 24)),
                ),
              ),
              heightFactor: 0.6,
            );
          },
        ));
  }
flutter-layout flutter listview
2 Answers

You can reverse the ListView and while populating data use maxLength-index-1.

body: ListView.builder(
  itemCount: 20,
  reverse: true,
  itemBuilder: (context, index) {
    return Align(
      child: Card(
        color:
            Colors.primaries[random.nextInt(Colors.primaries.length)]
                [random.nextInt(9) * 100],
        child: Container(
          width: 100,
          child: Text('Item ${20 - index - 1}',
              style: TextStyle(fontSize: 24)),
        ),
      ),
      heightFactor: 0.6,
    );
  },
)

enter image description here

user_101571270

It's a hack but you can reverse your List and ListView as well and use them.

I am assuming you must be getting the list dynamically so you need to reverse a list first as well to show it in proper order.

Example:

List<MaterialColor> testColor = Colors.primaries.reversed.toList();

and use it in a list like below:

ListView.builder(
  itemCount: testColor.length,
  shrinkWrap: true,
  reverse: true,
  itemBuilder: (context, index) {
    return Align(
      child: Card(
        color: testColor[random.nextInt(testColor.length)]
            [random.nextInt(9) * 100],
        child: Container(
          width: 100,
          child: Text(
            'Item ${testColor.length - index - 1}',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
      heightFactor: 0.6,
    );
  },
),

I have additionally set shrinkWrap: true so if your list is of limited length so it won't take an entire space of the screen.

user_76527580
Related