Centralised text is not getting applied to text widgets

I am creating a flutter application where I am trying to create my own theme.
This is my theme class file. For text I am using 'Orbitron' font style.
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),
),
// NEW, BUNDLED WAY
textTheme: ThemeData.light().textTheme
.apply(
fontFamily: 'Orbitron', // Use the family name from pubspec.yaml
)
.copyWith(
headlineLarge: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold, // This will use Orbitron-Bold.ttf
color: RetroColors.highlight,
),
titleMedium: TextStyle(
fontSize: 18,
fontWeight:
FontWeight.w600, // This will use the closest weight, likely Bold
color: RetroColors.secondary,
),
bodyMedium: TextStyle(
fontSize: 16,
fontWeight: FontWeight.normal, // This will use Orbitron-Regular.ttf
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),
),
);
This is screen where I am trying to use texttheme.
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),
Text(
'TEST Orbitron Regular 400',
style: TextStyle(
fontFamily: 'Orbitron',
fontWeight: FontWeight.w900, // Regular
fontSize: 24,
color: Colors.white,
),
),
],
),
),
);
}
}
Now on my splash screen, 'Orbitron'font is getting applied to 'TEST Orbitron Regular 400' text but not to other texts on screen.
Github repo for same project : Retro Chef Github repo
First I used google fonts package directly from pub but I faced same issue. Now I have downloaded all the font files and added to assets folder. But issue still persists. I don't understand why it is working with normal text style where I am passing fontFamily as 'Orbitron' but not when I am fetching it using 'Theme.of(context).textTheme'.
Answer
It looks like your font is correctly loaded , but your theme isn’t consistently applying the Orbitron
font to all text styles used by TextTheme
. This is likely due to relying on .apply()
on ThemeData.light().textTheme
, which doesn’t always propagate the fontFamily to every style.
you can try two solutions :
1 - use the fontFamily
parameter in the ThemeData
constructor:
final ThemeData retroChefTheme = ThemeData(
brightness: Brightness.dark,
fontFamily: 'Orbitron', // ✅ GLOBAL FONT
scaffoldBackgroundColor: RetroColors.background,
primaryColor: RetroColors.primary,
colorScheme: ColorScheme.dark(
primary: RetroColors.primary,
secondary: RetroColors.secondary,
surface: RetroColors.background,
onPrimary: RetroColors.white,
onSecondary: RetroColors.background,
// rest of your code
2- define your textTheme
using Orbitron
for each style:
textTheme: TextTheme(
headlineLarge: TextStyle(
fontFamily: 'Orbitron',
fontSize: 28,
fontWeight: FontWeight.bold,
color: RetroColors.highlight,
),
titleMedium: TextStyle(
fontFamily: 'Orbitron',
fontSize: 18,
fontWeight: FontWeight.w600,
color: RetroColors.secondary,
),
bodyMedium: TextStyle(
fontFamily: 'Orbitron',
fontSize: 16,
fontWeight: FontWeight.normal,
color: RetroColors.white,
),
labelLarge: TextStyle(
fontFamily: 'Orbitron',
fontSize: 14,
color: RetroColors.secondary,
),
),
i hope this was helpfull
Enjoyed this question?
Check out more content on our blog or follow us on social media.
Browse more questions