在Flutter Shadcn UI中全局自定义字体的解决方案

问题背景

在使用Flutter Shadcn UI框架时，开发者可能会遇到需要全局自定义字体的情况。特别是在中文环境下，默认字体可能无法满足美观需求。本文将详细介绍如何在Shadcn UI中正确设置全局字体，包括按钮等组件的字体样式。

解决方案

1. 添加字体文件

首先需要在项目的pubspec.yaml文件中正确配置字体资源。以"LXGW WenKai"字体为例：

flutter:
  fonts:
    - family: LXGW
      fonts:
        - asset: fonts/LXGWWenKai-Bold.ttf
          weight: 700
        - asset: fonts/LXGWWenKai-Light.ttf
          weight: 300
        - asset: fonts/LXGWWenKai-Regular.ttf

注意要为不同字重(weight)分别指定对应的字体文件。

2. 配置Shadcn UI主题

在应用的根组件中，通过ShadThemeData设置全局字体：

ShadApp(
  theme: ShadThemeData(
    brightness: Brightness.light,
    textTheme: ShadTextTheme(
      colorScheme: const ShadZincColorScheme.light(),
      family: 'LXGW', // 这里使用字体family名称
    ),
  ),
  // 其他配置...
)

3. 暗色主题的特殊处理

如果需要同时配置亮色和暗色主题，必须分别设置：

ShadApp(
  theme: ShadThemeData(
    brightness: Brightness.light,
    textTheme: ShadTextTheme(
      colorScheme: const ShadZincColorScheme.light(),
      family: 'LXGW',
    ),
  ),
  darkTheme: ShadThemeData(
    brightness: Brightness.dark,
    textTheme: ShadTextTheme(
      colorScheme: const ShadZincColorScheme.dark(),
      family: 'LXGW', // 暗色主题也需要单独设置字体
    ),
  ),
  // 其他配置...
)

常见问题排查

1. 字体不生效：

   • 检查字体文件路径是否正确
   • 确认pubspec.yaml中的字体family名称与代码中使用的一致
   • 确保已运行flutter pub get命令

2. 按钮字体未改变：

   • 确认是否同时配置了暗色主题
   • 检查是否有其他主题设置覆盖了全局配置

3. Windows平台构建问题：

   • 如果使用Rive动画库，可能需要安装Clang编译工具
   • 可以考虑移除不必要的依赖项

最佳实践

1. 建议为项目创建专门的字体配置文件，便于统一管理
2. 在团队协作项目中，确保所有开发者都安装了相同的字体文件
3. 对于中文项目，优先选择开源中文字体如"LXGW WenKai"等

通过以上步骤，开发者可以轻松地在Flutter Shadcn UI项目中实现全局字体自定义，确保应用界面风格统一美观。