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

Question

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.

If the text isn't too long you could create a new widget that is composed of *2 rows* and *2 columns*, where you put your normal text inside the bottom-left slot and your superscript text inside your upper-right slot. If the text you're displaying is too long, then it might be too much rendering. — Philippe Fanaro, Nov 08 '19 at 19:31

score 74 · Accepted Answer · edited Jan 24 '19 at 00:04

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

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):

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

Flutter has built-in constants for these characters. See [here](https://api.flutter.dev/flutter/charcode/charcode-library.html). For example, "superscript 1" is `$sup1`, "superscript 2" is `$sup2`, etc. It also includes Greek characters, and many other things. — piccy, Aug 10 '19 at 13:46
@AndreyChaschev Doesn't appear to. There's Greek and various symbols, but I didn't see Chinese. — piccy, Apr 06 '20 at 19:28
@piccy how to use those constants? For example `Text($sup2)` gives an error: `Undefined name: $sup2` — temirbek, Sep 26 '20 at 13:13
@temirbek Be sure to import `package:charcode/charcode.dart`. Then you would use them as you would any templated variable, ie `Text('$sup2')`. — piccy, Sep 27 '20 at 20:54
that package doesnt seem to have subscripts, or am i missing it? based on the above answer anyway you can use subscripts to put it into a string like ${"CO\u2082"}" — Gary O' Donoghue, Nov 03 '20 at 11:22
is there a subscript dot? I can't figure how to write PM2.5 (2.5 being subscript) — temirbek, Feb 15 '21 at 11:42
@temirbek Perhaps a bit late here, but I used `String.fromCharCode(charcode.$sup2)` to make it print correctly. Oh, and I imported the library using `import 'package:charcode/charcode.dart' as charcode;`. — nelsonspbr, Mar 08 '22 at 02:03

score 21 · Answer 2 · edited Jul 03 '20 at 12:07

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

score 9 · Answer 3 · answered Mar 07 '21 at 22:37

9

https://medium.com/flutter-community/font-features-in-flutter-320222fc171d

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

answered Mar 07 '21 at 22:37

Temirlan Almassov

101
2
2

1

You could also use `TextStyle(fontFeatures: [FontFeature.superscripts()])` – TahitianGabriel Sep 16 '21 at 00:34

score 7 · Answer 4 · answered May 13 '21 at 09:15

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

score 2 · Answer 5 · answered Mar 10 '21 at 08:23

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

Miki · Answer 6 · 2022-05-06T10:02:42.780

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

)

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

6 Answers6

Linked

Related