Question 79214 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Wrap alignment for unknown item size

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:
enter image description here

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?

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    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,
),
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search