'Aligning text using RichText in flutter

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:[1]

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

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

Solution 2:[2]

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

)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nbn
Solution 2 Miki