A part of horizontal list view is not on a base line

January 16, 2022

A part of a horizontal scroll list is not on a base line, here is Icefields, Alberta is aligned to the top of sized box. How to fix it? The whole list view should be on the same horizontal level.

SizedBox(
width: double.maxFinite,
height: 50,
    child: ListView(
      scrollDirection: Axis.horizontal,
      children: [
        const Icon(...),
        const SizedBox(...),
        AppText(
          text: detail.place.location,
          color: AppColors.textColor1,
        ),
        const SizedBox(...),
        Row(
          children: [
            Wrap(
              children: List.generate(5, (index) {
                return Icon(...);
              }),
            ),
            const SizedBox(...),
            AppText(
              text:
                  detail.place.stars.toString() + '.0',
              color: AppColors.textColor2,
            ),
          ],
        ),
      ],
    ),
),

>Solution :

Another solution is to put the location AppText within the Row:

Row(
    children: [
      AppText(
        text: detail.place.location,
        color: AppColors.textColor1,
      ),
      Wrap(
        children: List.generate(5, (index) {
          return Icon(...);
        }),
      ),
      const SizedBox(...),
      AppText(
        text:
            detail.place.stars.toString() + '.0',
        color: AppColors.textColor2,
      ),
    ],
)

This way all widgets in the Row are aligned the same.