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