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,
),
)
],
),
);
Ok, so I needed to put a fixed height in my ThreadIcon widget :
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,
height: 30, // here add fixed height
child: Text(
title.toString(),
style: const TextStyle(
fontWeight: FontWeight.w800,
fontSize: 11,
),
maxLines: 2,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
),
)
],
),
);