Place an arrow at the end of the horizontal listview , i tried to warp horizontal listview and sizedbox for the arrow in Raw Widget but the arrow is always shown i wanna show when get the end of the list like this

 Row(
        children: [
          const SizedBox(
              width: 100,
              height: 375,
              child: Icon(
                Icons.swipe_left_alt_rounded,
                color: Colors.black,
                size: 24,
              )),
          SizedBox(
            height: 375,
            width: SizeConfig.screenWidth * 0.8,
            child: ListView.builder(
              reverse: true,
              scrollDirection: Axis.horizontal,

CodePudding user response：

You can use itemBuilder to build items based on your need.

class AF extends StatelessWidget {
  const AF({super.key});

  @override
  Widget build(BuildContext context) {
    const itemLength = 4;
    return Scaffold(
      body: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: itemLength,
        itemBuilder: (context, index) {
          if (index == itemLength - 1) { // here will be the logic
            return Row(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Icon(Icons.arrow_back),
                itemBuilder(index),
              ],
            );
          }

          return itemBuilder(index);
        },
      ),
    );
  }

  Widget itemBuilder(int index) =>
      Container(width: 200, child: Text("ItemNumber $index"));
}

CodePudding user response：

Try use ListView swap outside Arrow Icon and ListView.builder:

This is demo code:

class TestScreen extends StatelessWidget {

const TestScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: SizedBox(
        height: 350,
        child: ListView(
          reverse: true,
          scrollDirection: Axis.horizontal,
          children: [
            ListView.builder(
              shrinkWrap: true,
              reverse: true,
              scrollDirection: Axis.horizontal,
              physics: const NeverScrollableScrollPhysics(),
              itemBuilder: (context, index) {
                return Container(
                  margin: const EdgeInsets.all(10),
                  decoration: BoxDecoration(border: Border.all(width: 2)),
                  child: Padding(
                    padding: const EdgeInsets.all(30),
                    child: Center(
                      child: Text(
                        index.toString(),
                      ),
                    ),
                  ),
                );
              },
              itemCount: 10,
            ),
            const SizedBox(
                width: 100,
                child: Icon(
                  Icons.swipe_left_alt_rounded,
                  color: Colors.black,
                  size: 24,
                )),
          ],
        ),
      ),
    );
  }
}