+- 0Day Forums (https://0day.red)
+-- Forum: Coding (https://0day.red/Forum-Coding)
+--- Forum: Flutter & Dart (https://0day.red/Forum-Flutter-Dart)
+--- Thread: Is it possible to make characters in Flutter to have the same width? (/Thread-Is-it-possible-to-make-characters-in-Flutter-to-have-the-same-width)
Is it possible to make characters in Flutter to have the same width? - guacamoles515507 - 07-21-2023
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?
[!['s][1]][1]
[1]:
RE: Is it possible to make characters in Flutter to have the same width? - fitzhugh511 - 07-21-2023
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.
[To see links please register here]
RE: Is it possible to make characters in Flutter to have the same width? - trubow911 - 07-21-2023
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.
RE: Is it possible to make characters in Flutter to have the same width? - bobbiweknxgflmf - 07-21-2023
You can set the font feature to use `tabularFigures`.
// import 'dart:ui';
Text(
_getTimeString(),
style: TextStyle(
fontFeatures: [
FontFeature.tabularFigures()
],
),
),
Before:
[![enter image description here][1]][1]
After:
[![enter image description here][2]][2]
See also:
- [Font Features in Flutter][3]
[1]:
[2]:
[3]:
[To see links please register here]