how to add a arrow shape in flutter screen

Question

I have a list view with 9 items , and each item has a same dark blue picture in their left

ListView.builder(
              itemCount: 9,
              itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 8.0),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Image.asset(
                        "assets/logos/navy-circle.png",
                        width: 40,
                        height: 40,
                      ),
                      const SizedBox(width: 20),
                      Expanded(
                        child: Text(
                          'Paragraph ${index + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.',
                          style: const TextStyle(color: Colors.white, fontSize: 13, fontWeight: FontWeight.bold),
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),

it looks like this :

but i want to add an Arrow icon throw the images , something like this :

any idea? thanks

Answer 1

You can try this:

ListView.builder(
        itemCount: 9 + 2, // top and buttom of arrow
        itemBuilder: (BuildContext context, int index) {
          if (index == 0) {
            // end of arrow
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Row(
                children: [
                  SizedBox(
                    height: 40,
                    width: 40,
                    child: Container(// replace this with your svg arrow tail
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            );
          }
          if (index == 11 - 1) {
            // head of arrow
            return Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Row(
                children: [
                  SizedBox(
                    height: 40,
                    width: 40,
                    child: Container( // replace this with your svg arrow head
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            );
          }
          return Padding(
            padding: const EdgeInsets.symmetric(
              horizontal: 8.0,
            ),
            child: IntrinsicHeight(
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Stack(
                    alignment: Alignment.center,
                    children: [
                      Container(
                        width: 4,
                        color: Colors.white,
                      ),
                      Container(
                        width: 40,
                        height: 40,
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.blueGrey,
                        ),
                      ),
                    ],
                  ),
                  const SizedBox(width: 20),
                  Expanded(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(vertical: 8.0),
                      child: Text(
                        'Paragraph ${index + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.',
                        style: const TextStyle(
                            color: Colors.white,
                            fontSize: 13,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      )

NOTE: I don't have svgs of the arrow's head and tail so I used simple white container, you can replace those with your image.