skip to Main Content

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

2

Answers


  1. Chosen as BEST ANSWER

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

  2. Use Row to align items with equal space on sides (if you’re certain about the length of the items). The ListView will occupy the available space and it’ll keep adding the items one after another.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search