Centralised text is not getting applied to text widgets

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