Text UI

I want to create UI similar like this in flutter using RichText widget. Can you please help me with the code? I am not understanding how to design such UI?

Solution 1: Nabin Dhakal

Use WidgetSpan for giving offset to get superscript. Do as follows:

            padding: EdgeInsets.all(10),
            child: Center(
              child: RichText(
                text: TextSpan(children: [
                      child: Transform.translate(
                          offset: const Offset(0.0, -7.0), child:                               
                      text: '1,500',
                      style: TextStyle(color: Colors.black,                             
                        fontSize: 18,fontWeight:FontWeight.bold),
                      recognizer: TapGestureRecognizer()
                        ..onTap = () {
                          // navigate to desired screen

Solution 2: Miki

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

        text: TextSpan(
          children: [
              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)),