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
相关产品推荐
相关产品推荐

