Emoji has wrong size when using Text with bigger font size in Flutter

Viewed 15

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

Screenshot with smaller font

Screenshot with bigger font

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()}"),
                  ],
                ),
              ),
            ],
          ),
        );
      }
    }
0 Answers
Related