How I can make price format look like the image below in flutter?

Question

I am trying to find a solution for displaying the price as shown in the image below, please help !

Answer 1

Output:-

Code:-

import 'package:flutter/material.dart';

class PriceFormatExample extends StatefulWidget {
  const PriceFormatExample({Key? key}) : super(key: key);

  @override
  State<PriceFormatExample> createState() => _PriceFormatExampleState();
}

class _PriceFormatExampleState extends State<PriceFormatExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 80.0,
          width: 180.0,
          alignment: Alignment.topCenter,
          child: RichText(
            text: const TextSpan(
              children: [
                WidgetSpan(
                  baseline: TextBaseline.alphabetic,
                  alignment: PlaceholderAlignment.aboveBaseline,
                  child: Text(
                    '\$',
                    style: TextStyle(
                      fontSize: 20,
                      color: Colors.black,
                    ),
                  ),
                ),
                TextSpan(
                  text: '29',
                  style: TextStyle(
                    fontSize: 28,
                    color: Colors.black,
                  ),
                ),
                WidgetSpan(
                  baseline: TextBaseline.alphabetic,
                  alignment: PlaceholderAlignment.aboveBaseline,
                  child: Text(
                    '99',
                    style: TextStyle(
                      fontSize: 20,
                      color: Colors.black,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Answer 2

I did it two different ways you can see the results, you will have to play with the alignment a bit to get it exactly how you want. the first is using text span, you can align the textspans how you would like. the second is using a row for 29 then a column on the 99 spli in half so it raises it. you can do the same in the front for the $ sign.

 Container(
                  height: 70,
                  width: 100,
                  child: Column(
                    children: [
                      Container(
                        alignment: Alignment.topCenter,
                        height: 35,
                        child: Row(
                          children: [
                            RichText(
                              text: TextSpan(children: [
                                TextSpan(text: '\$'),
                                TextSpan(
                                    text: '29.',
                                    style: TextStyle(
                                      fontSize: 25,
                                    )),
                                TextSpan(text: '99')
                              ]),
                            )
                          ],
                        ),
                      ),
                      Container(
                        height: 35,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            const Text(
                              '\$29',
                              style: TextStyle(fontSize: 30),
                            ),
                            Column(
                              children: [Text('99'), Spacer()],
                            )
                          ],
                        ),
                      ),
                    ],
                  ),
                ),