Showing "4th" "5th" " " in flutter-CodePudding

How to write 4th , 5th as a string in the way that we write in the paper by using dart ?

I tried but couldn't get the answer.

CodePudding user response：

It's call superscript and subscript text. you can implement that scenario like this,

RichText(
          text: TextSpan(children: [
            TextSpan(
                text: 'The 4',
                style: TextStyle(color: Colors.white)),
            WidgetSpan(
              child: Transform.translate(
                offset: const Offset(2, -4),
                child: Text(
                  'th',
                  //superscript is usually smaller in size
                  textScaleFactor: 0.7,
                  style: TextStyle(color: Colors.white),
                ),
              ),
            )
          ]),
        ),

CodePudding user response：

I think what you are talking about is superscripts. You can easily achieve those using https://api.flutter.dev/flutter/dart-ui/FontFeature-class.html Font Feature Class from dart:ui

Text(
      '4th',
      style: TextStyle(
        fontFeatures: [
          FontFeature.enable('sups'),
        ],
      ),
    ),