Flutter Pro Design

Small details that build taste in Flutter.

curated by Kamran BekirovKamran Bekirov

Newsletter? Nah, I hate them.

Follow me on and catch new details.

Use tabular figures for numbers that change

Watch the top timer. The numbers keep jumping left and right as the seconds change, because in most fonts a 1 is thinner than an 8. So when a wide digit turns into a thin one, everything after it slides over to fill the space. The bottom one stays still.

The fix is called tabular figures. It makes every digit the same width, so a 1 takes up the same space as an 8. Now the number can change and nothing around it moves. You turn it on with a font flag:

Text(
  '00:48',
  style: TextStyle(
    fontFeatures: [
      FontFeature.tabularFigures(),
    ],
  ),
);

It helps in three spots:

  • Numbers that change (timers, counters, prices) stay still instead of jumping around.
  • Numbers in a list (tables, totals) line up neatly, so they are easy to compare.
  • Long numbers (card numbers, codes) are easier to read one digit at a time.

The cost is that equal-width digits look a little loose inside normal sentences, since the narrow ones get padded. So it is not a global setting.

The rule is: if the number changes or lines up with others, give it tabular figures. If it just sits in a sentence, leave it.