How can I display a currency/unit symbol as a superscript at the top-left of my digits in Flutter?

Question

I’m learning Flutter and trying to re-create the layout shown in the attached image, where the symbol “€” appears as a superscript positioned above and to the left of the numeric value.

Here is the screenshot:

I’ve attempted using RichText with WidgetSpan, but I can’t get the symbol to align correctly. But none of the PlaceholderAlignment options (top, aboveBaseline, belowBaseline) produce exactly the superscript effect I need. How can I correctly position the symbol as a sub/superscript (top-left) of the number in Flutter?

Answer 1

You have 2 solutions

1. Just like what @pskink stated in the comment

   import 'package:flutter/material.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(title: Text('Superscript Symbol Example')),
           body: Center(
             child: RichText(
               text: TextSpan(
                 children: [
                   TextSpan(
                     text: '€',
                     style: TextStyle(
                       fontSize: 24,
                       fontFeatures: [
                         FontFeature.superscripts() // Apply superscript feature
                       ],
                     ),
                   ),
                   TextSpan(
                     text: '100',
                     style: TextStyle(fontSize: 32),
                   ),
                 ],
               ),
             ),
           ),
         ),
       );
     }
   }
   

2. OR you can use a row with 2 texts (the currency with small font) and setting the crossAxisAlignment to start

Answer 2

You just need to change the font of digits and it should be ok.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Digital Display Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Digital Display')),
      body: Center(
        child: Container(
          padding: const EdgeInsets.all(20),
          color: Colors.black,
          child: const DigitalDisplay(value: "0.00", currencySymbol: "€"),
        ),
      ),
    );
  }
}

class DigitalDisplay extends StatelessWidget {
  final String value;
  final String currencySymbol;
  final Color digitColor;
  final double digitSize;
  final double symbolSize;
  final double symbolOffsetX;
  final double symbolOffsetY;

  const DigitalDisplay({
    super.key,
    required this.value,
    required this.currencySymbol,
    this.digitColor = Colors.red,
    this.digitSize = 80,
    this.symbolSize = 24,
    this.symbolOffsetX = -18,
    this.symbolOffsetY = 28,
  });

  @override
  Widget build(BuildContext context) {
    return Stack(
      clipBehavior: Clip.none,
      children: [
        Text(
          value,
          style: TextStyle(
            fontFamily: 'Digital',
            fontSize: digitSize,
            color: digitColor,
            fontWeight: FontWeight.bold,
          ),
        ),
        Positioned(
          left: symbolOffsetX,
          top: symbolOffsetY,
          child: Text(
            currencySymbol,
            style: TextStyle(
              fontSize: symbolSize,
              color: Colors.white,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ],
    );
  }
}