Flutter中FittedBox包裹单个emoji不显示问题求助

是否为Bug #

这大概率是Flutter 3.3.x版本中关于FittedBox与单个emoji文本布局的渲染bug。从版本差异来看，3.0.0到3.3.6的文本渲染模块（尤其是Text组件的尺寸计算逻辑）有调整，导致单个emoji在FittedBox中无法被正确识别为可渲染的文本内容，进而出现不显示的情况。

可行的自动缩放解决办法 #

这里提供几种靠谱的解决思路：

方案1：添加零宽空格占位 #

在单个emoji前后添加零宽空格（\u200B），让文本组件识别到有效内容长度，从而触发FittedBox的缩放逻辑：

FittedBox(
  fit: BoxFit.contain,
  child: Text('😀\u200B'),
)

方案2：手动指定Text的最小宽度 #

通过TextStyle配合StrutStyle强制文本拥有最小尺寸，避免FittedBox因内容尺寸计算为0而不渲染：

FittedBox(
  fit: BoxFit.contain,
  child: Text(
    '😀',
    style: TextStyle(
      strutStyle: StrutStyle(minWidth: 1.0),
    ),
  ),
)

方案3：用Transform.scale替代FittedBox #

如果FittedBox的问题无法规避，可以直接使用Transform.scale实现缩放，手动控制缩放比例适配父容器：

LayoutBuilder(
  builder: (context, constraints) {
    final scale = constraints.maxWidth / 100; // 100为emoji原始参考尺寸，可按需调整
    return Transform.scale(
      scale: scale,
      child: Text('😀'),
    );
  },
)

最小复现代码 #

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(
      home: Scaffold(
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            color: Colors.grey[200],
            child: FittedBox(
              fit: BoxFit.contain,
              child: Text('😀'), // 单个emoji不显示
              // child: Text('a😀b'), // 带字母正常显示
            ),
          ),
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Neckslap