Flutter Shadcn UI 中使用 Google Fonts 的正确方式

在 Flutter 开发中使用 Shadcn UI 组件库时，很多开发者会遇到 Google Fonts 字体设置不生效的问题。本文将详细解析这个问题及其解决方案。

问题现象

当开发者按照官方文档说明，在 ShadApp 的 theme 配置中使用 ShadTextTheme.fromGoogleFont() 方法设置 Google Fonts 时，发现应用的字体并没有如预期般改变，仍然保持默认字体。

问题原因

经过分析，这个问题源于 Shadcn UI 的实现细节。虽然 ShadTextTheme.fromGoogleFont() 方法确实创建了带有 Google Fonts 的文本主题，但这些设置并没有被自动应用到 Material 的 ThemeData 中。

解决方案

有两种方法可以正确应用 Google Fonts：

方法一：显式使用 ShadTextTheme

在需要自定义字体的文本组件中，直接使用 ShadTheme 提供的文本样式：

Text(
  "Hello World", 
  style: ShadTheme.of(context).textTheme.p
)

这种方法确保直接使用了通过 fromGoogleFont() 创建的文本样式。

方法二：手动设置 Material ThemeData

如果你希望全局应用字体，可以手动将 Google Fonts 设置到 Material 的 ThemeData 中：

return MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.aguafinaScriptTextTheme(
      Theme.of(context).textTheme,
    ),
  ),
  home: ShadApp(...),
);

最佳实践

1. 局部使用：如果只需要在部分组件中使用特殊字体，推荐使用方法一，直接引用 ShadTextTheme。

2. 全局使用：如果需要整个应用都使用 Google Fonts，建议使用方法二，在 MaterialApp 级别设置字体。

3. 性能考虑：Google Fonts 会从网络加载字体，首次使用时可能会有延迟。对于关键文本，考虑预加载字体或使用备用字体。

总结

Shadcn UI 提供了便捷的 fromGoogleFont() 方法来集成 Google Fonts，但开发者需要注意它不会自动影响 Material 的默认文本样式。根据应用需求选择合适的实现方式，可以确保字体按预期显示。

理解框架的实现细节和合理使用 API 是解决这类问题的关键。希望本文能帮助开发者更好地在 Shadcn UI 项目中使用自定义字体。