Flutter Wrap alignment for unknown item size-CodePudding

How can I have a Wrap with rows with an unknown size (because they contain text)? I also need to keep alignment between the rows.

I looked at GridView.extent, but it needs a specific max extent provided.

My code is this:

SizedBox(
      width: double.infinity,
      child: Wrap(
        spacing: 5,
        runSpacing: 5,
        alignment: WrapAlignment.spaceBetween,
        children: [
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text("Comfort"),
              const SizedBox(width: 10),
              CustomRatingBarIndicator(rating: aggregateReview.comfortRating),
            ],
          ),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text("Safety"),
              const SizedBox(width: 10),
              CustomRatingBarIndicator(rating: aggregateReview.safetyRating)
            ],
          ),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text("Reliability"),
              const SizedBox(width: 10),
              CustomRatingBarIndicator(rating: aggregateReview.reliabilityRating)
            ],
          ),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              const Text("Hospitality"),
              const SizedBox(width: 10),
              CustomRatingBarIndicator(rating: aggregateReview.hospitalityRating)
            ],
          ),
        ],
      ),
    ),

It currently looks like this:

Both the stars and the text should be aligned. The stars always have the same size of course, but the text does not (it might be bigger because of the OS). So sometimes two items would fit inside one grid row, but when the screen is narrow and the text is big, we would need to put all of below one another.

Is there a way to do this?

CodePudding user response：

There may be many approaches to this but one way to do this is making the use of Flexible.

Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Flexible(child: SizedBox(width:40, child: Text("Comfort"),),),
              const SizedBox(width: 10),
              CustomRatingBarIndicator(rating: aggregateReview.comfortRating),
            ],
          ),

Now what you have done is given the fixed amount of width to your text. So everything will be aligned. Flexible is for when you have two words it will move to next line.

CodePudding user response：

As the problem with text widget you can solve this issue like this :

Container(
width: 80, //you can define like this 

child: Text("Hospitality",
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
),
)