You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Flutter自定义主题中TextTheme全局字体配置未生效问题求助

Flutter自定义主题中TextTheme全局字体配置未生效问题求助

大家好,我现在在开发一个Flutter应用,正在自定义主题并指定全局使用Orbitron字体,但遇到了一个奇怪的问题:直接在Text组件里手动设置fontFamily: 'Orbitron'时字体能正常显示,但通过Theme.of(context).textTheme获取的文本样式却没有应用这个字体,想请大家帮忙看看哪里出问题了。

我的配置和代码情况

  • 字体引入:我已经把Orbitron的各个字重字体文件下载到了assets/fonts目录,并且在pubspec.yaml里正确配置了字体(手动指定fontFamily是有效的,应该配置没问题)。

  • 主题类代码:
    我在主题里通过apply(fontFamily: 'Orbitron')来全局设置字体,然后又用copyWith覆盖了几个文本样式:

import 'package:flutter/material.dart';
import 'package:retro_chef/theme/retro_colors.dart';

final ThemeData retroChefTheme = ThemeData(
  brightness: Brightness.dark,
  scaffoldBackgroundColor: RetroColors.background,
  primaryColor: RetroColors.primary,
  colorScheme: ColorScheme.dark(
    primary: RetroColors.primary,
    secondary: RetroColors.secondary,
    surface: RetroColors.background,
    onPrimary: RetroColors.white,
    onSecondary: RetroColors.background,
  ),
  appBarTheme: AppBarTheme(
    backgroundColor: RetroColors.primary,
    foregroundColor: RetroColors.white,
    elevation: 0,
  ),
  elevatedButtonTheme: ElevatedButtonThemeData(
    style: ElevatedButton.styleFrom(
      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 14),
      textStyle: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      backgroundColor: RetroColors.accentStart, // fallback
    ),
  ),
  textButtonTheme: TextButtonThemeData(
    style: TextButton.styleFrom(foregroundColor: RetroColors.secondary),
  ),
  // 全局字体配置部分
  textTheme: ThemeData.light().textTheme
      .apply(
        fontFamily: 'Orbitron', // 这里指定全局使用Orbitron字体
      )
      .copyWith(
        headlineLarge: TextStyle(
          fontSize: 28,
          fontWeight: FontWeight.bold,
          color: RetroColors.highlight,
        ),
        titleMedium: TextStyle(
          fontSize: 18,
          fontWeight: FontWeight.w600,
          color: RetroColors.secondary,
        ),
        bodyMedium: TextStyle(
          fontSize: 16,
          fontWeight: FontWeight.normal,
          color: RetroColors.white,
        ),
        labelLarge: TextStyle(fontSize: 14, color: RetroColors.secondary),
      ),
  inputDecorationTheme: InputDecorationTheme(
    filled: true,
    fillColor: RetroColors.suggestionBox,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: const BorderSide(color: RetroColors.secondary),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
      borderSide: const BorderSide(color: RetroColors.accentEnd),
    ),
    hintStyle: const TextStyle(color: Colors.white70),
  ),
);
  • SplashScreen使用代码:
    在启动页里,我尝试使用主题里的textTheme,比如headlineLarge,但字体没有生效;而手动写fontFamily: 'Orbitron'的Text组件却能正常显示Orbitron字体:
import 'package:flutter/material.dart';
import 'package:retro_chef/theme/retro_colors.dart';
import 'package:retro_chef/widgets/gradient_text.dart';

class SplashScreen extends StatefulWidget {
  const SplashScreen({super.key});

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    // 注释掉的路由跳转代码
    // Future.delayed(const Duration(seconds: 3), () {
    //   if (!mounted) return;
    //   Navigator.pushReplacement(
    //     context,
    //     MaterialPageRoute(
    //       builder: (context) {
    //         return HomePage();
    //       },
    //     ),
    //   );
    // });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).scaffoldBackgroundColor,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('assets/images/retro_chef_logo.png', width: 200),
            GradientText(
              text: 'RETRO CHEF',
              gradient: LinearGradient(
                colors: [
                  RetroColors.accentStart,
                  RetroColors.highlight,
                  RetroColors.secondary,
                ],
              ),
              style: Theme.of(
                context,
              ).textTheme.headlineLarge?.copyWith(fontSize: 40),
            ),
            SizedBox(height: 12),
            Text(
              'Your AI Cooking Assistant',
              style: Theme.of(context).textTheme.headlineLarge,
            ),
            SizedBox(height: 12),
            // 这个手动指定fontFamily的Text是正常显示Orbitron的
            Text(
              'TEST Orbitron Regular 400',
              style: TextStyle(
                fontFamily: 'Orbitron',
                fontWeight: FontWeight.w900,
                fontSize: 24,
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

我已经尝试过的方法

  • 一开始用google_fonts包直接引入Orbitron,遇到了同样的问题;
  • 换成本地下载字体文件,手动配置pubspec,还是一样的情况;
  • 清理过缓存,重启过IDE,热重载热重启都试过,问题依旧。

实在搞不懂为什么手动指定fontFamily可以,但主题里的全局配置就不生效,有没有大佬能帮我找找问题所在?

内容来源于stack exchange

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.04.08 09:29:32