Flutter Create Superscript Subscript Text - Easy way

Hello friends, We have seen subscript and superscript text many times in our daily life while studying math, physics and chemistry subject. But most of us don't know it by name. So in today's tutorial we would know about what is subscript and superscript text and how we can create Superscript Subscript text in flutter app.

Flutter Create Superscript Text:

1. First we are creating superscript text in flutter by combination of RichText, TextSpan and WidgetSpan widgets.

Code Explanation:

We are using WidgetSpan widget to apply offset property and setting up the Text offset in Y-Axis direction. Offset(double dx, double dy) . dx means set offset in horizontal manner and dy means set offset in vertical manner.

RichText(
                        text: TextSpan(
      children: [
        const TextSpan(
            text: 'A', style: TextStyle(color: Colors.black, fontSize: 21)),
        WidgetSpan(
          child: Transform.translate(
            offset: const Offset(0.0, -10.0),
            child: const Text(
              '2',
              style: TextStyle(fontSize: 17),
            ),
          ),
        ),
        const TextSpan(text: ' + ', style: TextStyle(color: Colors.black)),
        const TextSpan(
            text: 'B', style: TextStyle(color: Colors.black, fontSize: 21)),
        WidgetSpan(
          child: Transform.translate(
            offset: const Offset(0.0, -10.0),
            child: const Text(
              '2',
              style: TextStyle(fontSize: 17),
            ),
          ),
        ),
      ],
    ))

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: RichText(
                        text: TextSpan(
      children: [
        const TextSpan(
            text: 'A', style: TextStyle(color: Colors.black, fontSize: 21)),
        WidgetSpan(
          child: Transform.translate(
            offset: const Offset(0.0, -10.0),
            child: const Text(
              '2',
              style: TextStyle(fontSize: 17),
            ),
          ),
        ),
        const TextSpan(text: ' + ', style: TextStyle(color: Colors.black)),
        const TextSpan(
            text: 'B', style: TextStyle(color: Colors.black, fontSize: 21)),
        WidgetSpan(
          child: Transform.translate(
            offset: const Offset(0.0, -10.0),
            child: const Text(
              '2',
              style: TextStyle(fontSize: 17),
            ),
          ),
        ),
      ],
    ))))));
  }
}

Screenshot of App:

Flutter Create Subscript Text:

1. To create subscript text all we have to do is pass the offset value in + number.

RichText(
                        text: TextSpan(
      children: [
        const TextSpan(
            text: 'H', style: TextStyle(color: Colors.black, fontSize: 21)),
        WidgetSpan(
          child: Transform.translate(
            offset: const Offset(0.0, 5.0),
            child: const Text(
              '2',
              style: TextStyle(fontSize: 17),
            ),
          ),
        ),
        const TextSpan(
            text: 'SO', style: TextStyle(color: Colors.black, fontSize: 21)),
        WidgetSpan(
          child: Transform.translate(
            offset: const Offset(0.0, 5.0),
            child: const Text(
              '4',
              style: TextStyle(fontSize: 17),
            ),
          ),
        ),
      ],
    ))

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: RichText(
                        text: TextSpan(
      children: [
        const TextSpan(
            text: 'H', style: TextStyle(color: Colors.black, fontSize: 21)),
        WidgetSpan(
          child: Transform.translate(
            offset: const Offset(0.0, 5.0),
            child: const Text(
              '2',
              style: TextStyle(fontSize: 17),
            ),
          ),
        ),
        const TextSpan(
            text: 'SO', style: TextStyle(color: Colors.black, fontSize: 21)),
        WidgetSpan(
          child: Transform.translate(
            offset: const Offset(0.0, 5.0),
            child: const Text(
              '4',
              style: TextStyle(fontSize: 17),
            ),
          ),
        ),
      ],
    ))))));
  }
}

Screenshot: