Flutter设置textTheme后默认fontFamily失效,是否为默认行为?
Flutter全局字体设置后,添加textTheme导致字体失效问题
我为Flutter应用全局设置了默认字体族'Raleway',未设置textTheme时该字体正常生效;但设置textTheme后,应用的字体样式和字体族全部改变。请问这是Flutter的默认行为吗?还是我的代码需要修正?
相关代码
import 'package:flutter/material.dart'; import './categories_screen.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return MaterialApp( title: 'DeliMeal App', theme: ThemeData( colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.pink) .copyWith(secondary: Colors.amber), canvasColor: const Color.fromRGBO(255, 254, 250, 1), fontFamily: 'Raleway', // textTheme: ThemeData.light().textTheme.copyWith(), ), home: const CategoriesScreen(), ); } }
效果对比
未设置textTheme参数时:

设置textTheme参数后:

问题解答
这是Flutter的默认行为,原因如下:
- 当你使用
ThemeData.light().textTheme.copyWith()时,是基于Flutter原生的浅色主题文本样式进行修改,这套默认样式并不会自动继承你在ThemeData中设置的fontFamily: 'Raleway'。 - 未显式设置textTheme时,Flutter会自动把全局配置的fontFamily应用到默认文本样式上;但一旦手动指定textTheme,就会覆盖这种自动继承逻辑,导致全局字体失效。
代码修正方案
推荐两种可靠的修正方式,确保textTheme继承全局字体:
方式一:基于带全局字体的ThemeData生成textTheme
theme: ThemeData( colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.pink) .copyWith(secondary: Colors.amber), canvasColor: const Color.fromRGBO(255, 254, 250, 1), fontFamily: 'Raleway', textTheme: ThemeData( fontFamily: 'Raleway', ).textTheme.copyWith( // 在这里添加你需要自定义的文本样式,例如: titleLarge: const TextStyle( fontWeight: FontWeight.bold, fontSize: 20, ), ), ),
方式二:用TextTheme.apply方法统一指定字体
theme: ThemeData( colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.pink) .copyWith(secondary: Colors.amber), canvasColor: const Color.fromRGBO(255, 254, 250, 1), fontFamily: 'Raleway', textTheme: ThemeData.light().textTheme.apply( fontFamily: 'Raleway', // 统一为textTheme下所有样式指定字体 ).copyWith( // 自定义需要修改的文本样式 ), ),
两种方式都能让textTheme中的所有文本样式继承'Raleway'字体族,同时保留你自定义文本样式的能力。
内容的提问来源于stack exchange,提问作者Smit Prajapati
相关产品推荐
相关产品推荐

