Question 77646 in Flutter Question posted in
The official Flutter documentation can be found here.

Place an arrow at the end of the horizontal listview flutter

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

enter image description here

 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,
Tags:

2

Answers


  1. 0

    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"));
}
    Login or Signup to reply.
  2. 0

    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,
                )),
          ],
        ),
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search