flutterdartflutter-ui

how to add a arrow shape in flutter screen


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 :

enter image description here

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

enter image description here

any idea? thanks


Solution

  • 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),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          )
    

    enter image description here

    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.