1

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?

1
  • What is your problem recreating this UI ? Can you provide more information?
    – BLKKKBVSIK
    Jun 3, 2021 at 16:58

2 Answers 2

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

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

)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.