Flutter热重载加载表单时文本错乱,多次触发才生效求助
Flutter热重载后文本错乱,多次重载才正常的解决方案
问题现象
- 热重载登录表单时出现文本错乱,需重复点击热重载约20次才能正常显示文本
- 已尝试增加设备内存、执行
flutter clean命令,问题仍未解决
排查方向及解决办法
结合你提供的代码(使用了自定义Inter字体的800字重),大概率是自定义字体加载或热重载缓存导致的问题,可按以下步骤排查:
检查pubspec.yaml字体配置
确保字体文件路径、字重配置与实际文件完全匹配,比如:flutter: fonts: - family: Inter fonts: - asset: fonts/Inter-ExtraBold.ttf weight: 800注意:文件名要和你放在项目里的字体文件一致,字重
800对应ExtraBold,不能写错。提前预热字体缓存
在App初始化时强制加载自定义字体,避免热重载时字体加载延迟:void main() async { WidgetsFlutterBinding.ensureInitialized(); // 提前加载所需字体 await DefaultAssetBundle.of(WidgetsFlutterBinding.instance).load('fonts/Inter-ExtraBold.ttf'); runApp(const MyApp()); }清除热重载时的字体缓存
热重载时Flutter可能复用旧的字体缓存,手动清除缓存试试:void main() { WidgetsFlutterBinding.ensureInitialized(); // 清除字体和图片缓存 PaintingBinding.instance.imageCache.clear(); PaintingBinding.instance.fontManager.clearCache(); runApp(const MyApp()); }用系统字体测试定位问题
临时注释掉fontFamily: 'Inter',改用系统默认字体,如果热重载后文本正常,说明问题确实出在自定义字体的配置或加载上。升级Flutter到稳定版
部分旧版本Flutter存在热重载字体渲染的bug,执行以下命令升级:flutter upgrade
附相关代码
import 'package:flutter/material.dart'; class LoginPage extends StatelessWidget{ const LoginPage({super.key}); @override Widget build(BuildContext context){ return Scaffold( backgroundColor: Color(0xFF171717), body: SafeArea( child: Center( child: Column( children: [ const SizedBox(height: 100), Text( "Регистрация", style: TextStyle( color: Color(0xFFFFFFFF), fontSize: 36, fontFamily: 'Inter', // Имя шрифта из pubspec.yaml fontWeight: FontWeight.w800, // Соответствует ExtraBold letterSpacing: 36 * 0.04, ), ), ] ) ) ) ); } }
内容的提问来源于stack exchange,提问作者Denis Budenniy
相关产品推荐
相关产品推荐

