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

0

Issue

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 ?

Solution

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),
        ),
      ),
    )
  ]),
)

Answered By – Shahryar Rafique

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More