Search code examples
flutterdartlistviewalignment

Align items in horizontal ListView.builder - Flutter


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 :

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

Solution

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