Aligning text using RichText in flutter

Question

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?

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