Flutter中google_fonts包无法正确渲染Roboto Flex字体权重问题

问题现象 #

在Flutter项目中使用google_fonts包时，发现Roboto Flex字体无法渲染Bold、W600、W700、W800、W900等权重样式，但Lato等其他字体可正常显示对应粗体效果。测试显示：

• Lato字体设置FontWeight.w900或FontWeight.bold时，文字能正常显示粗体
• Roboto Flex设置相同权重参数后，文字粗细无变化，仍保持常规样式

测试代码示例 #

// Lato字体测试
Center(
  child: Text(
    'GoogleFonts.lato',
    style: GoogleFonts.lato(
        textStyle: const TextStyle(
      fontSize: 17,
    )),
  ).pV(5).pH(20),
),
Center(
  child: Text(
    'This is GoogleF.lato',
    style: GoogleFonts.lato(
        textStyle: const TextStyle(
            fontSize: 26,
            fontWeight: FontWeight.w900)),
  ).pV(5).pH(20),
),
Center(
  child: Text(
    'This is GoogleF.lato',
    style: GoogleFonts.lato(
        textStyle: const TextStyle(
            fontSize: 26,
            fontWeight: FontWeight.bold)),
  ).pV(1).pH(20),
),
const SizedBox(
  height: 35,
),
// Roboto Flex字体测试
Center(
  child: Text(
    'GoogleFonts.robotoflex',
    style: GoogleFonts.robotoFlex(
        textStyle: const TextStyle(
      fontSize: 17,
    )),
  ).pV(5).pH(20),
),
Center(
  child: Text(
    'This is GoogleF.RobotoFlex',
    style: GoogleFonts.robotoFlex(
        textStyle: const TextStyle(
            fontSize: 26,
            fontWeight: FontWeight.w900)),
  ).pV(1).pH(20),
),
Center(
  child: Text(
    'This is GoogleF.RobotoFlex',
    style: GoogleFonts.robotoFlex(
        textStyle: const TextStyle(
            fontSize: 26,
            fontWeight: FontWeight.bold)),
  ).pV(1).pH(20),
),

问题原因 #

Roboto Flex是可变字体（Variable Font），它通过字体轴（如wght轴）实现连续的粗细变化，而非像Lato这类传统字体那样提供独立的粗体字重文件。google_fonts包默认的FontWeight枚举值与Roboto Flex的wght轴数值映射存在偏差，导致无法正确触发粗体渲染。

解决办法 #

方法1：直接传入权重数值替代FontWeight枚举 #

对于可变字体，直接在GoogleFonts.robotoFlex()中使用数值类型的fontWeight参数，而非FontWeight枚举：

Center(
  child: Text(
    'This is GoogleF.RobotoFlex',
    style: GoogleFonts.robotoFlex(
      fontWeight: 900, // 直接传入数值，对应wght轴的900值
      textStyle: const TextStyle(fontSize: 26),
    ),
  ).pV(1).pH(20),
),

方法2：升级google_fonts包 #

旧版本的google_fonts对可变字体的支持不完善，升级到最新版本可修复部分映射问题：

flutter pub upgrade google_fonts

方法3：自定义字体轴参数 #

通过TextStyle的fontFeatures直接指定字体轴参数，精准控制可变字体属性：

Center(
  child: Text(
    'This is GoogleF.RobotoFlex',
    style: GoogleFonts.robotoFlex(
      textStyle: const TextStyle(
        fontSize: 26,
        fontFeatures: [
          FontFeature.weight(900), // 直接指定wght轴数值
        ],
      ),
    ),
  ).pV(1).pH(20),
),

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