Writing Superscript Text in Flutter using Extensions

We will create like this

Introduction: In Flutter, creating rich and visually appealing text is essential for a great user interface. Sometimes, we may need to display text with superscripts, such as mathematical equations, chemical formulas, or ordinal numbers. I’m sharing a code snippet that demonstrates how to write text as superscript in Flutter using an extension method. We will analyze the code step by step to understand its functionality and provide a clear explanation of each component.

Code Explanation: The provided code snippet below showcases an extension method called withSuperscript defined on the Text widget in Flutter. The purpose of this extension method is to generate a RichText widget with superscript functionality. Let's break down the code and understand its implementation.

Extension Method:

extension AmountText on Text {
  RichText withSuperscript(String text, TextStyle style, {String? leadingSymbol}) => RichText(
        text: TextSpan(
          children: [
            TextSpan(
              text: text.split('.')[0].toCurrencyString(
                    mantissaLength: 0,
                    leadingSymbol: leadingSymbol ?? '\$',
                    useSymbolPadding: true,
                  ),
              style: style,
            ),
            TextSpan(
              text: '.${text.split('.')[1]}',
              style: style.copyWith(
                fontFeatures: [
                  FontFeature.superscripts(),
                ],
              ),
            ),
          ],
        ),
      );
}

Note: toCurrencyString(), Im using the flutter_multi_formatter package for currency format.

1. Extension Method Declaration: The code begins by defining an extension method named AmountText on the Text widget. This allows us to call the withSuperscript method directly on instances of the Text widget.
2. Parameters:

• text: This parameter represents the original text that needs to be transformed into a superscript format.
• style: The TextStyle object defines the appearance of the text.
• leadingSymbol (optional): It is an optional parameter that specifies the symbol to be placed before the text. The default value is the dollar sign ('$').

3. RichText Widget Creation: The withSuperscript method returns a RichText widget. The RichText the widget allows us to display styled and formatted text with different styles within a single Text widget.

4. TextSpan Children: Inside the RichText widget, we define a TextSpan widget as its child. The TextSpan widget allows us to compose multiple styled text components.

5. First TextSpan: The first TextSpan contains the text before the decimal point. To achieve this, we use the split method to split the original text based on the decimal point and select the part before it. Then, we apply the toCurrencyString method to format the number as a currency string. Finally, we set the specified style for this part of the text.

6. Second TextSpan: The second TextSpan represents the text after the decimal point, which should be displayed as superscript. To achieve this, we again use the split method to select the part after the decimal point. We append a dot ('.') to the front of this part to maintain the original formatting. Additionally, we create a copy of the provided style object and add a FontFeature.superscripts() to the fontFeatures property. This FontFeature enables the superscript effect for the specified text.

Usage: To use this extension method, we can call withSuperscript directly on a Text widget instance. Here's an example:

Text('').withSuperscript('45870.98',
 TextStyle(fontSize: 16.0),
),

Conclusion: The provided Flutter code snippet demonstrates a convenient extension method that allows you to generate superscript text using the RichText widget. By leveraging this extension, you can easily incorporate superscript functionality into their text elements, enabling them to create visually appealing and informative user interfaces.