Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

flutter

dart

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.

like image 882
Deepak Gehlot Avatar asked Jan 18 '19 12:01

Deepak Gehlot


People also ask

How do you write subscript text in Flutter?

There might be cases where you want to display some subscripts and superscripts in a Flutter application such as mathematical formulas, chemical equations, or physics curves. To render subscripts, you can set the style of Text or TextSpan widgets like this: TextStyle( fontFeatures: [FontFeature.

How do you show a superscript in Flutter?

Flutter has built-in constants for these characters. See here. For example, "superscript 1" is $sup1 , "superscript 2" is $sup2 , etc. It also includes Greek characters, and many other things.

How do you subscript or superscript in text?

Keyboard shortcuts: Apply superscript or subscript Select the character that you want to format. For superscript, press Ctrl, Shift, and the Plus sign (+) at the same time. For subscript, press Ctrl and the Equal sign (=) at the same time.

What is RichText in Flutter?

The RichText widget is used to display text that uses various different styles. The displayed text is described using a tree of TextSpan objects, each of which has its own associated style that is used for that subtree.


2 Answers

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

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

Deepak Gehlot


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),
        ),
      ),
    )
  ]),
)
like image 34
ak_ninan Avatar answered Sep 18 '22 16:09

ak_ninan