I have this code :
FutureBuilder(
future: _data,
builder: (context, AsyncSnapshot snapshot) {
if (!snapshot.hasData) {
return const Center(child: CustomLoadingAnimation());
} else {
var data = snapshot.data;
return Container(
decoration: BoxDecoration(
color: primaryFlashColor,
borderRadius: BorderRadius.circular(20)),
height: 14.h,
width: 100.w,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: data.length,
itemBuilder: (context, index) {
return ThreadIcon(
title: data[index]['title'],
url: data[index]['pic']);
}),
),
);
}
})
And this preview :
As you can see, the first item has his title only in 1 line, so the image is lower than the others.
Any idea that can help to fix this ?
EDIT : Here is my ThreadIcon widget : as you can see, there is 2 maxLine. But when title is only on 1 line, items are not aligned horizontally
Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 50,
width: 50,
decoration: BoxDecoration(
border: Border.all(width: 2, color: customWhite),
borderRadius: BorderRadius.circular(100),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: Image.network(
url.toString(),
fit: BoxFit.cover,
)),
),
SizedBox(
height: 1.h,
),
SizedBox(
width: 45,
child: Text(
title.toString(),
style: const TextStyle(
fontWeight: FontWeight.w800,
fontSize: 11,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
),
)
],
),
);
2
Answers
Ok, so I needed to put a fixed height in my ThreadIcon widget :
Use
Row
to align items with equal space on sides (if you’re certain about the length of the items). TheListView
will occupy the available space and it’ll keep adding the items one after another.