how can we use superscript and subscript text in flutter Text or RichText

i want to show a superscript text but not found any example or can anyone help me with this.

I have tried Text and RichText also, but not found any method or fields.

You need to use Unicode. Here is the Unicode got from [this answer][1]:

```
unicode_map = {
# superscript subscript
'0' : ('\u2070', '\u2080' ),
'1' : ('\u00B9', '\u2081' ),
'2' : ('\u00B2', '\u2082' ),
'3' : ('\u00B3', '\u2083' ),
'4' : ('\u2074', '\u2084' ),
'5' : ('\u2075', '\u2085' ),
'6' : ('\u2076', '\u2086' ),
'7' : ('\u2077', '\u2087' ),
'8' : ('\u2078', '\u2088' ),
'9' : ('\u2079', '\u2089' ),
'a' : ('\u1d43', '\u2090' ),
'b' : ('\u1d47', '?' ),
'c' : ('\u1d9c', '?' ),
'd' : ('\u1d48', '?' ),
'e' : ('\u1d49', '\u2091' ),
'f' : ('\u1da0', '?' ),
'g' : ('\u1d4d', '?' ),
'h' : ('\u02b0', '\u2095' ),
'i' : ('\u2071', '\u1d62' ),
'j' : ('\u02b2', '\u2c7c' ),
'k' : ('\u1d4f', '\u2096' ),
'l' : ('\u02e1', '\u2097' ),
'm' : ('\u1d50', '\u2098' ),
'n' : ('\u207f', '\u2099' ),
'o' : ('\u1d52', '\u2092' ),
'p' : ('\u1d56', '\u209a' ),
'q' : ('?', '?' ),
'r' : ('\u02b3', '\u1d63' ),
's' : ('\u02e2', '\u209b' ),
't' : ('\u1d57', '\u209c' ),
'u' : ('\u1d58', '\u1d64' ),
'v' : ('\u1d5b', '\u1d65' ),
'w' : ('\u02b7', '?' ),
'x' : ('\u02e3', '\u2093' ),
'y' : ('\u02b8', '?' ),
'z' : ('?', '?' ),
'A' : ('\u1d2c', '?' ),
'B' : ('\u1d2e', '?' ),
'C' : ('?', '?' ),
'D' : ('\u1d30', '?' ),
'E' : ('\u1d31', '?' ),
'F' : ('?', '?' ),
'G' : ('\u1d33', '?' ),
'H' : ('\u1d34', '?' ),
'I' : ('\u1d35', '?' ),
'J' : ('\u1d36', '?' ),
'K' : ('\u1d37', '?' ),
'L' : ('\u1d38', '?' ),
'M' : ('\u1d39', '?' ),
'N' : ('\u1d3a', '?' ),
'O' : ('\u1d3c', '?' ),
'P' : ('\u1d3e', '?' ),
'Q' : ('?', '?' ),
'R' : ('\u1d3f', '?' ),
'S' : ('?', '?' ),
'T' : ('\u1d40', '?' ),
'U' : ('\u1d41', '?' ),
'V' : ('\u2c7d', '?' ),
'W' : ('\u1d42', '?' ),
'X' : ('?', '?' ),
'Y' : ('?', '?' ),
'Z' : ('?', '?' ),
'+' : ('\u207A', '\u208A' ),
'-' : ('\u207B', '\u208B' ),
'=' : ('\u207C', '\u208C' ),
'(' : ('\u207D', '\u208D' ),
')' : ('\u207E', '\u208E' ),
':alpha' : ('\u1d45', '?' ),
':beta' : ('\u1d5d', '\u1d66' ),
':gamma' : ('\u1d5e', '\u1d67' ),
':delta' : ('\u1d5f', '?' ),
':epsilon' : ('\u1d4b', '?' ),
':theta' : ('\u1dbf', '?' ),
':iota' : ('\u1da5', '?' ),
':pho' : ('?', '\u1d68' ),
':phi' : ('\u1db2', '?' ),
':psi' : ('\u1d60', '\u1d69' ),
':chi' : ('\u1d61', '\u1d6a' ),
':coffee' : ('\u2615', '\u2615' )
}
```

And for cut-and-paste purposes (from [here][2]):

```
⁰ ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁺ ⁻ ⁼ ⁽ ⁾ ₀ ₁ ₂ ₃ ₄ ₅ ₆ ₇ ₈ ₉ ₊ ₋ ₌ ₍ ₎
ᵃ ᵇ ᶜ ᵈ ᵉ ᶠ ᵍ ʰ ⁱ ʲ ᵏ ˡ ᵐ ⁿ ᵒ ᵖ ʳ ˢ ᵗ ᵘ ᵛ ʷ ˣ ʸ ᶻ
ᴬ ᴮ ᴰ ᴱ ᴳ ᴴ ᴵ ᴶ ᴷ ᴸ ᴹ ᴺ ᴼ ᴾ ᴿ ᵀ ᵁ ⱽ ᵂ
ₐ ₑ ₕ ᵢ ⱼ ₖ ₗ ₘ ₙ ₒ ₚ ᵣ ₛ ₜ ᵤ ᵥ ₓ ᵅ ᵝ ᵞ ᵟ ᵋ ᶿ ᶥ ᶲ ᵠ ᵡ ᵦ ᵧ ᵨ ᵩ ᵪ
```

[1]:

[To see links please register here]

[2]:

[To see links please register here]

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

[To see links please register here]

I found this. But I tried it didn't work with my code. But may be it going to help you

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

Tryed previous answers, but I had some issues with fonts. That worked for me.

Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 4.0),
child: Text(
'\$3',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
),
),
Text(
'99',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 10),
),
],
)

Use RichText Widget like this

RichText(
text: TextSpan(
style: TextStyle(color: Colors.red, fontSize: 16),
children: [
TextSpan(
text: 'Some text ',
),
WidgetSpan(
child: Transform.translate(
offset: const Offset(0.0, 4.0),
child: Text(
'subscripts',
style: TextStyle(fontSize: 11),
),
),
),
WidgetSpan(
child: Transform.translate(
offset: const Offset(0.0, -7.0),
child: Text(
'supscripts',
style: TextStyle(fontSize: 11),
),
),
),
TextSpan(
text: 'Some text ',
),
],
),
);

Or if you want to use recognizer on a superscripted text, then you should use something similar:

RichText(
text: TextSpan(
children: [
WidgetSpan(
child: Transform.translate(
offset: Offset(0.0, -7.0),
child: RichText( // use RichText instead ot Text if you need recognizer on a superscripted text
text: TextSpan(
text: "superscripted text",
//style: textStyle,
recognizer: tapGestureRecognizer,
),
)
),
),
],
),
);

Important: use RichText instead of Text in the inner block if you need recognizer on a superscripted text.


(
Easier version could be using fontFeatures in TextStyle, but it did not lift the text in my workaround, so it did not work properly for me.

TextStyle textStyle = TextStyle(...
fontFeatures: (isSup ? [FontFeature.subscripts()] : (isSub ? [FontFeature.subscripts()] : null)),
);

)