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

How to get the same letter size in the flutter

All settings of the letters above and below are the same.
However, as the contents of the letters change, the two sizes do not match each other.
Is there a way to solve this?

child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Container(height: 9,),
                  Text(
                    '              24.07.23 16:31',
                    style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.w600,
                        fontSize: 23,
                        fontFamily: "Interop",
                    ),
                  ),
                  Text(
                    '              24.10.15 16:01',
                    style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.w600,
                        fontSize: 23,
                        fontFamily: "Interop",

                    ),
                  ),
                ],
              ),

enter image description here

I tried to use a code like textScaleFactor to match the font size, but I couldn’t solve it.

Tags:

3

Answers


  1. 0

    Your texts do have the same font size:

    A digital ruler showing that the text sizes are the same

    The issue here is that the individual letters have different sizes – for example a 1 takes less horizontal space than a 0.

    What you want to do is use the textAlign-property of the Text()-widget and set it to justify, like so:

    Text(
    '24.10.15 16:01',
    style: TextStyle(
        color: Colors.white,
        fontWeight: FontWeight.w600,
        fontSize: 23,
        fontFamily: "Interop",
    ),
    textAlign: TextAlign.justify,
)

    Also remove the leading whitespace from your text, as this has no impact.

    This will yield a result similar to this:

    The result showing the correct justified alignment of the letters in the text

    For more information, see: How to justify text in a flutter column widget?

    See also: https://api.flutter.dev/flutter/dart-ui/TextAlign.html

    An alternative approach would be to have each element of your string as a separate Text()-widget with an absolute width.

    Login or Signup to reply.
  2. 0

    The screenshot you have provided contains different texts they are not same. Each letter has own width for example M is wider than I so.

    Login or Signup to reply.
  3. 0

    In normal fonts, as said in @rintu-banerjee answer, different letters has different widths and you can’t have same width for all possible texts with same character count.

    You need to use monospace fonts, monospaced fonts are some type of fonts which have same width for all characters and they used in IDEs, Command lines, …

    So you can find some monospaced fonts here in google fonts

    You can use google fonts in flutter by these steps:

    1. Add google_fonts package with flutter pub add google_fonts
    2. Select your favorite font from google fonts website (filter fonts to Monospaced)
    3. Use style from google_fonts in your text that you need to be monospaced, for example, if you want to use Roboto Mono font, you need to add style: GoogleFonts.robotoMono() to your text widget.

    Example use:

    child: Column(
        children: [
          Text('Interop Font: '),
          Text('24.07.23 16:31' ,style: TextStyle(fontFamily: 'Interop'),),
          Text('24.10.15 16:01' ,style: TextStyle(fontFamily: 'Interop'),),
          SizedBox(height: 25),
          Text('Monospaced Fonts: '),
          Text('24.07.23 16:31', style: GoogleFonts.robotoMono()),
          Text('24.10.15 16:01', style: GoogleFonts.robotoMono()),
        ],
      ),

    Result:

    monospaced font differences

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

Back To Top
Search