I'm using the Text widget in Flutter. When the fontSize gets bigger (about 83pts), emojis scale wrong. They seem to double their size but the non-emoji text scales right. I need to have really big texts in the app (supporting emojis) because they will almost fill up the screen.
I tried changing the font family but the same happens. Giving the text a smaller size and place it inside a FittedBox has the same result.
Here's what happens when changing the fontSize:
https://youtu.be/aKrc6VbIR80
Here is the code I'm using to reproduce it:
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
class DebugScreen extends StatefulWidget {
const DebugScreen({super.key});
@override
State<DebugScreen> createState() => _DebugScreenState();
}
class _DebugScreenState extends State<DebugScreen> {
double fontSize = 12;
@override
void initState() {
super.initState();
SystemChrome.setPreferredOrientations([
DeviceOrientation.portraitUp,
DeviceOrientation.landscapeLeft,
DeviceOrientation.landscapeRight,
]);
}
Widget _debugBox(Widget child) {
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.red, width: 1),
),
child: child,
);
}
@override
Widget build(BuildContext context) {
final padding = MediaQuery.of(context).padding;
return Scaffold(
body: Stack(
children: [
Positioned(
top: 50,
left: 0,
child: _debugBox(
Text(
"Hi ",
style: TextStyle(
fontSize: fontSize,
),
),
),
),
Positioned(
left: 50,
right: 50,
bottom: padding.bottom,
child: Row(
children: [
Expanded(
child: Slider(
min: 2,
max: 500,
value: fontSize,
onChanged: (val) => setState(
() => fontSize = val,
),
),
),
Text("Font size = ${fontSize.toInt()}"),
],
),
),
],
),
);
}
}