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

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

CodePudding user response：

Wrap AppText with Center widget.

  ....
  Center(
    child: AppText(
      text: detail.place.location,
      color: AppColors.textColor1,
    ),
  ),
 ....

CodePudding user response：

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.