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
