Create an account

Very important

  • To access the important data of the forums, you must be active in each forum and especially in the leaks and database leaks section, send data and after sending the data and activity, data and important content will be opened and visible for you.
  • You will only see chat messages from people who are at or below your level.
  • More than 500,000 database leaks and millions of account leaks are waiting for you, so access and view with more activity.
  • Many important data are inactive and inaccessible for you, so open them with activity. (This will be done automatically)


Thread Rating:
  • 287 Vote(s) - 3.47 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Is it possible to make characters in Flutter to have the same width?

#1
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]:
Reply

#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.

[To see links please register here]




Reply

#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.
Reply

#4
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]

Reply



Forum Jump:


Users browsing this thread:
1 Guest(s)

©0Day  2016 - 2023 | All Rights Reserved.  Made with    for the community. Connected through