text value spacing issue

[husnain067]

AnimatedFlipCounter(
curve: Curves.slowMiddle,
value: price,
fractionDigits: 2, // decimal precision
textStyle: const TextStyle(
letterSpacing: -4.0,
wordSpacing: 0.0,
color: simpleTextColor,
fontWeight: FontWeight.w700,
fontSize: 32.0,
),
),

[husnain067]

[husnain067]

extra space before 1 this creating the issue

[h65wang]

This is intended. Each digit has a fixed width, to avoid jumping around when values are changed.

It's the 1 that makes it look like there's extra space.

[h65wang]

It's worth adding that, using a monospaced font can be a valid workaround, see this issue.

[h65wang]

Oops, turns out this could be caused by a bug. I just released a fix in v0.2.4, please help test and report if your issue has been resolved. Thanks!

[SimonVillage]

I have seen that you use this for spacing

    final prototypeDigit = TextPainter(
      text: TextSpan(text: "8", style: style),
      textDirection: TextDirection.ltr,
      textScaleFactor: MediaQuery.of(context).textScaleFactor,
    )..layout();

I think it would be better to use

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

https://api.flutter.dev/flutter/dart-ui/FontFeature/FontFeature.tabularFigures.html

[husnain067]

I have seen that you use this for spacing

    final prototypeDigit = TextPainter(
      text: TextSpan(text: "8", style: style),
      textDirection: TextDirection.ltr,
      textScaleFactor: MediaQuery.of(context).textScaleFactor,
    )..layout();

I think it would be better to use

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

https://api.flutter.dev/flutter/dart-ui/FontFeature/FontFeature.tabularFigures.html

@h65wang what about this solution

[h65wang]

A request to use FontFeature.tabularFigures has been added to v0.3.1. Hopefully this can help resolve alignment issues for fonts that support tabular figures.