How can I display any number with a power in Flutter?

Question

Here is my situation (simplified) :

I have two inputs:

• a number (a)
• another number (b)

How can I display nicely a^b (a to the power of b) in the frontend with Flutter ?

Answer 1

You can make use of offset property in WidgetSpan. I have used the below code to show flight cross overs. The Offset dx and dy values helps you to set superscript or subscript as per your need.

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