在Shadcn-UI中正确使用Google Fonts字体

问题背景

在使用Flutter的Shadcn-UI组件库时，开发者可能会遇到Google Fonts字体无法正确应用的问题。根据官方文档配置后，字体仍然显示为默认样式，这通常是由于字体设置未正确传递到Material主题导致的。

解决方案

1. 基础配置方法

首先，确保你已经按照标准方式在ShadApp中设置了Google Fonts：

ShadApp(
  theme: ShadThemeData(
    textTheme: ShadTextTheme.fromGoogleFont(GoogleFonts.aguafinaScript),
    // 其他配置...
  ),
  // 其他配置...
)

2. 关键注意事项

重要发现：直接使用普通的Text小部件时，字体可能不会生效。这是因为Shadcn-UI的字体主题需要显式应用到文本样式上。

3. 正确使用方法

要确保Google Fonts生效，必须通过ShadTheme获取文本样式：

Text(
  "Hello World", 
  style: ShadTheme.of(context).textTheme.p // 使用Shadcn-UI的文本样式
)

4. 实现原理分析

这个问题出现的原因是：

1. Shadcn-UI虽然正确创建了Google Fonts的文本样式
2. 但这些样式没有自动关联到Flutter的Material主题
3. 必须通过ShadTheme显式获取样式才能确保字体生效

5. 最佳实践建议

对于项目中所有文本，建议统一使用Shadcn-UI提供的文本样式，这不仅能确保字体一致性，还能保持整体设计语言统一：

// 标题
Text("标题", style: ShadTheme.of(context).textTheme.h1)

// 正文
Text("正文内容", style: ShadTheme.of(context).textTheme.p)

// 小号文本
Text("辅助文字", style: ShadTheme.of(context).textTheme.small)

总结

在Shadcn-UI中使用Google Fonts时，开发者需要注意字体样式的获取方式。与直接使用Flutter默认主题不同，必须通过ShadTheme显式获取文本样式才能确保自定义字体生效。这种设计虽然增加了一些使用复杂度，但提供了更灵活的样式控制能力。