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

How can I make a text take a fixed width based on the length of a string in flutter?

I have a widget tree as follows:

Widget example() {
    return Column(
      children: [
        Row(
          children: [
            Expanded(
              child: Container(
                height: 100,
                decoration: BoxDecoration(color: Colors.red),
              ),
            ),
            Text('25.00%')
          ],
        ),
        Row(
          children: [
            Expanded(
              child: Container(
                height: 100,
                decoration: BoxDecoration(color: Colors.red),
              ),
            ),
            Text('125.00%')
          ],
        ),
        Row(
          children: [
            Expanded(
              child: Container(
                height: 100,
                decoration: BoxDecoration(color: Colors.red),
              ),
            ),
            Text('1250.00%')
          ],
        ),
      ],
    );
  }

How can I make all texts take the same horizontal space without using pixels in width so that all containers are aligned vertically?

I would like to set a fixed length for my percentages and the ones that are shorter are padded with spaces and the ones that are longer get cropped with the text elipsis.

Is there a clean build in method to do that?

Tags:

2

Answers


  1. 0

    the solution for all those issues is in the auto_size_text package, you can set a maxLines to set the maximum lines an AutoSizeText so if you have multiple AutoSizeText widgets, all will take the same horizontal space because however, your text is long, the package will resize it to fit in the specific lines ranges, otherwise, you can give it ellipsis style.

    AutoSizeText(
  yourText,
  maxLines: 1,
  minFontSize: 10,
  wrapWords: false,
  overflow: TextOverflow.ellipsis,
);
    Login or Signup to reply.
  2. 0

    Since your requirement is to set a fixed width for the percentages and ellipsize the text if it overflows, I’ll suggest that you wrap your Text widget too inside an Expanded widget and use flex property for both the expanded components of the row. I’m suggesting a ratio of 5:1 between both components of the row, represented by flex1 and flex2 respectively. However, you may set the flex as per your requirement.
    Secondly, I’ve used overflow: TextOverflow.ellipsis in all of the Text widgets that will take care of the ellipsis part of your requirement.
    I’ve also aligned the text to right but that’s totally up to u.

    Following is the revised code:

    Widget example2() {
  int flex1 = 5;
  int flex2 = 1;
  return Column(
    children: [
      Row(
        children: [
          Expanded(
            flex: flex1,
            child: Container(
              height: 100,
              decoration: BoxDecoration(color: Colors.red),
            ),
          ),
          Expanded(
            flex: flex2,
            child: const Text('25.00%',
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.right,
            ),
          )
        ],
      ),
      Row(
        children: [
          Expanded(
            flex: flex1,
            child: Container(
              height: 100,
              decoration: BoxDecoration(color: Colors.red),
            ),
          ),
          Expanded(
            flex: flex2,
            child: const Text('125.00%',
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.right,
            ),
          )
        ],
      ),
      Row(
        children: [
          Expanded(
            flex: flex1,
            child: Container(
              height: 100,
              decoration: BoxDecoration(color: Colors.red),
            ),
          ),
          Expanded(
            flex: flex2,
            child: const Text(
              '1250.00%',
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.right,
            ),
          )
        ],
      ),
    ],
  );

}

    Hope it helps!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search