Flutter How to bring forward a item in stack with Listview Builder-CodePudding

This is my widget.

ListView.builder(
          scrollDirection: Axis.horizontal,
          controller: scrollController,
          shrinkWrap: true,
          itemCount: 2,
          itemBuilder: (BuildContext context, int index) {
            return Tooltip(
              message: controller.salonModel.barberListName(index),
              decoration: BoxDecoration(
                  color: primary, borderRadius: BorderRadius.circular(10)),
              child: Align(
                widthFactor: 0.7,
                alignment: Alignment.topCenter,
                child: CircularPhotoContainer(
                  width: 50,
                  photoUrl: controller.salonModel.barberListPhotos(index),
                  borderColor: index == 0 ? secondary : bGroundColor,
                  color: bGroundColor,
                  borderWidth: 4,
                  radius: 100,
                  boxFit: BoxFit.cover,
                  opacity: 1,
                ),
              ),
            );
          }),

This is ui.

I want to bring forward my first item like this but I didn't do that.

So how can I do that ?

CodePudding user response：

On your ListView.builder use reverse: true, If you like to order items on UI, you can use index as length-index-1

ListView.builder(
  scrollDirection: Axis.horizontal,
  shrinkWrap: true,
  itemCount: 5,
  reverse: true, //this
  itemBuilder: (BuildContext context, int index) {.....

Test example

class ListTe extends StatelessWidget {
  const ListTe({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<Color> colors = [Colors.red, Colors.green, Colors.pink];
    return Scaffold(
      body: ListView.builder(
        scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        itemCount: colors.length,
        reverse: true,
        itemBuilder: (BuildContext context, int index) {
          return Align(
            widthFactor: 0.7,
            alignment: Alignment.topCenter,
            child: Container(
              width: 50,
              decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: colors[colors.length - 1 - index]),
            ),
          );
        },
      ),
    );
  }
}

CodePudding user response：

You can try overlay_group_avatar package to group the images