how can we add superscript or subscript String on TextForm in Flutter?

Question

My requirement is to replicate the label text as shown in the below image in my Textform label and hint shown in another image. I have referred this answer but it has limited unicodes, have also used Easy Rich Text library but it is providing me with the widget and not just a string to use in label text and hint text.

How can I achieve this? thanks. Attached code at the bottom.

@override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: controller,
      keyboardType: TextInputType.numberWithOptions(signed: true,decimal: true),
      decoration: setInputDecoration(text),
      cursorHeight: 20,
      inputFormatters: <TextInputFormatter>[
        FilteringTextInputFormatter.allow(RegExp("[0-9.]")),
      ],
      validator: (value){
        if(value.isEmpty){
          return emptyString;
        }else if(CalculatorManager().isNotValidDouble(value)){
          return invalidInput;
        }
        return null;
      },
    );
  }

  setInputDecoration(String text) {
    return InputDecoration(
      contentPadding: EdgeInsets.fromLTRB(5.0, 3.0, 1.0, 3.0),
      filled: true,
      fillColor: Colors.white,
      focusedBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.lightBlueAccent, width: 2.0),
      ),
      enabledBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.lightBlueAccent, width: 1.0),
      ),
      hintText: text,
      labelText: text,
      hintStyle: TextStyle(
        color: Colors.grey,
      ),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.all(
          Radius.circular(10.0),
        ),
        borderSide: BorderSide.none,
      ),
    );
  }

score 0 · Answer 1 · answered Nov 01 '20 at 09:18

0

There are two packages you may refer :

https://pub.dev/packages/characters

https://pub.dev/packages/unicode

answered Nov 01 '20 at 09:18

bluenile

5,673
3
16
29

Please do not post "link only" answers. They go bad once the link changes. We aim to be the end of a web search, not another stepping stone that is loose and slippery. – sn- Nov 01 '20 at 10:14

sn- · Accepted Answer · 2020-11-01T11:22:07.067

0

As I can see you have used a few in the subscript letters. I would suggest creating a map of those and use it in your code. As we can't have something for ₘᵢₙ we can use Unicodes in combinations.

  Map<String, String> ksub_map = {
    'min': '\u2098\u1D62\u2099',
    't': '\u209C',
    'e': '\u2091',
  };

You can retrieve it like this in your code.

  print(ksub_map['min']);  // ₘᵢₙ
  print(ksub_map['t']);  // ₜ
  print(ksub_map['e']);  // ₑ

edited Nov 01 '20 at 11:22

answered Nov 01 '20 at 10:10

sn-

466
1
5
15

Thank you but it is already referred in my answer and this unicodes are limited. How can I subscript 'min' for instance? – Swapnil Kadam Nov 01 '20 at 10:35
@Swapnil You can use it in combination. Something like this '\u2098\u1D62\u2099' => this will result in ₘᵢₙ. – sn- Nov 01 '20 at 10:57
thanks, this will work in certain scenarios but hoping for a more cleaner and robust solution. – Swapnil Kadam Nov 01 '20 at 11:10
1

since there is not any clean solution for this using this. Thanks :) – Swapnil Kadam Jan 04 '21 at 08:10

how can we add superscript or subscript String on TextForm in Flutter?

2 Answers2