SuperScript and SubScript in flutter
AFAIK, subscript and superscript are not yet supported by Flutter, and they are still working in progress as mentioned in this GitHub thread:
For those specific examples you can use the relevant Unicode characters. For a generic solution, we don't currently have a way to control the vertical alignment of text spans; that's one of the bullet points in #224.
As a workaround, you can try the sample in this GitHub comment using RichText and Transform.translate;
You can try with RichText widget and Transform.transalte widget:
RichText( text: TextSpan( style: TextStyle(color: Colors.red, fontSize: 16), children: [ TextSpan( text: 'Some text ', ), WidgetSpan( child: Transform.translate( offset: const Offset(0.0, 4.0), child: Text( 'subscripts', style: TextStyle(fontSize: 11), ), ), ), WidgetSpan( child: Transform.translate( offset: const Offset(0.0, -7.0), child: Text( 'supscripts', style: TextStyle(fontSize: 11), ), ), ), TextSpan( text: 'Some text ', ), ], ), );
The same workaround was also used in one of the answer in this SO post;
Testing the workaround, you can now change the font family of the superscript/subscript:
import 'dart:ui';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
fontFamily: 'RobotoMono',
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Column(
children: [
RichText(
text: TextSpan(
style: TextStyle(
color: Colors.blue,
fontSize: 16,
fontFamily: 'Shizuru',
),
children: [
TextSpan(
text: '-2,500',
),
WidgetSpan(
child: Transform.translate(
offset: const Offset(0.0, -7.0),
child: Text(
'TND',
style: TextStyle(
fontSize: 11,
fontFamily: 'RobotoMono',
),
),
),
),
],
),
),
],
),
],
),
),
);
}
}
Output:
Note: I've used the Shizuru
and Roboto Mono
font family to visually compare the difference.
![Sameh Khemira](https://lh4.googleusercontent.com/-KGkw2KC5tZs/AAAAAAAAAAI/AAAAAAAAAQM/4BgKm8xtSCM/photo.jpg?sz=256)
Sameh Khemira
Updated on December 17, 2022Comments
-
Sameh Khemira over 1 year
I use the answer of this question and insert a superscript, it works fine just like this
Now ,is it possible to edit the superscript fontFamily? I tried this and it dosen't work.the only thing that I can edit is the color.
Text("2500"+"TND", style: TextStyle(fontFamily: 'Avenir',color: Colors.blue)),
-
Amir over 4 yearsdid you add font family to your pubspec.yaml ?
-
Sameh Khemira over 4 yearsYes, I am already using it in the whole app and It works fine.
-