Is it possible to make characters in Flutter to have the same width?

Question

As you can see in the picture below, the texts have the same amount of characters, but since the number "1" is slimmer than the "5" and "2", both texts get a different width.

How can I adjust that in Flutter?

Answer 1

You can set the font feature to use tabularFigures.

// import 'dart:ui';

Text(
  _getTimeString(),
  style: TextStyle(
    fontFeatures: [
      FontFeature.tabularFigures()
    ],
  ),
),

Before:

After:

See also:

• Font Features in Flutter

Answer 2

Use a monospaced font, also called a fixed-pitch, fixed-width, or non-proportional font, is a font whose letters and characters each occupy the same amount of horizontal space.

Wikipedia explains it well. https://en.wikipedia.org/wiki/Monospaced_font

Answer 3

Hiepav suggestion, seems a good approach because you are not doing nothing wrong but each character in the font have different widths so it will have to adjust to give enough room.

However, as a workaround you can actually wrap your texts in a fixed width sized box that gives enough space for both widgets regarding its character widths variations , such as SizedBox, ConstrainedBox or even Container with width constraints and center align child. This way, with that font, you should at least have the : vertically aligned.