google_fonts in a ThemeData - fonts not being applied

Question

I'm trying to add a couple of google_fonts to a ThemeData. All of my theme is being applied, except that the google fonts are not. Why is this? Here is my project setup:

The theme:

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

import 'theme_utils.dart';

MaterialColor primaryColorShades = generateMaterialColor(primaryColor);
MaterialColor accentColorShades = generateMaterialColor(accentColor);

const Color primaryColor = Color(0xFF62d9d5);
const Color accentColor = Color(0xFF27a562);
const Color blueText = Color(0xFF409491);

ThemeData blueTheme = ThemeData(
  colorScheme: const ColorScheme(
      brightness: Brightness.light,
      primary: primaryColor,
      secondary: accentColor,
      surface: Colors.white,
      background: primaryColor,
      error: Colors.red,
      onBackground: Colors.white,
      onError: Colors.white,
      onPrimary: Colors.white,
      onSecondary: Colors.white,
      onSurface: blueText,
      primaryVariant: Colors.white,
      secondaryVariant: Colors.white),
  visualDensity: VisualDensity.standard,
  canvasColor: primaryColor,
  textTheme: GoogleFonts.varelaRoundTextTheme().copyWith(
    headline1: const TextStyle(
        fontSize: 30.0, fontWeight: FontWeight.bold, color: Colors.white),
    subtitle1: TextStyle(
        fontSize: 18.0,
        fontWeight: FontWeight.bold,
        color: Colors.white.withOpacity(0.7)),
    button: GoogleFonts.hind(
        textStyle: const TextStyle(
            fontSize: 12.0, fontWeight: FontWeight.w500, color: blueText)),
  ),
);

main.dart:

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'app/routes/app_pages.dart';
import 'app/theme/theme.dart';

void main() {
  runApp(GetMaterialApp(
    title: 'Application',
    initialRoute: AppPages.INITIAL,
    getPages: AppPages.routes,
    theme: blueTheme,
  ));
}

And use them in my view like so:

Text('Hi there, \nI\'m Vepo',
                style: Theme.of(context).textTheme.headline1,
                textAlign: TextAlign.center),

Text('I can help you find vegan things in your local area',
     style: Theme.of(context).textTheme.subtitle1,
     textAlign: TextAlign.center),

RaisedButton(padding: const EdgeInsets.symmetric(
             vertical: 10, horizontal: 60),
             elevation: 20.00,
             shape: RoundedRectangleBorder(
             borderRadius: BorderRadius.circular(40.0)),
             child: Text(
             'COOL, SIGN ME UP!',
             style: Theme.of(context).textTheme.button,
             ),
             onPressed: () {}),

in my pubspec.yaml:

flutter:
    uses-material-design: true
    assets:
        - assets/images/
        - google_fonts/

In the root of my project:

Why are the fonts not being applied?

From the google_fonts pub page, it seems like I might need to reference the context from within the ThemeData, but I don't have access since it is a different file, and I don't really want to change the ThemeData to be inline like on their docs:

MaterialApp(
  theme: ThemeData(
    textTheme: GoogleFonts.latoTextTheme(
      Theme.of(context).textTheme,
    ),
  ),
);

Answer 1

I thought I had to do things the google_fonts way, however, I don't. The google_fonts way seems to need context for certain things in the ThemeData. Changing to the flutter way:

in pubspec.yaml:

flutter:
    uses-material-design: true
    fonts:
        - family: VarelaRound
          fonts:
              - asset: assets/fonts/VarelaRound-Regular.ttf

In my theme:

import 'package:flutter/material.dart';

import 'theme_utils.dart';

MaterialColor primaryColorShades = generateMaterialColor(primaryColor);
MaterialColor accentColorShades = generateMaterialColor(accentColor);

const Color primaryColor = Color(0xFF62d9d5);
const Color accentColor = Color(0xFF27a562);
const Color blueText = Color(0xFF409491);

ThemeData blueTheme = ThemeData(
  colorScheme: const ColorScheme(
      brightness: Brightness.light,
      primary: primaryColor,
      secondary: accentColor,
      surface: Colors.white,
      background: primaryColor,
      error: Colors.red,
      onBackground: Colors.white,
      onError: Colors.white,
      onPrimary: Colors.white,
      onSecondary: Colors.white,
      onSurface: blueText,
      primaryVariant: Colors.white,
      secondaryVariant: Colors.white),
  visualDensity: VisualDensity.standard,
  canvasColor: primaryColor,
  fontFamily: 'varelaRound',
  textTheme: TextTheme(
    headline1: const TextStyle(
        fontSize: 30.0,
        fontWeight: FontWeight.bold,
        color: Colors.white,
        fontFamily: 'varelaRound'),
    subtitle1: TextStyle(
        fontSize: 18.0,
        fontWeight: FontWeight.bold,
        fontFamily: 'varelaRound',
        color: Colors.white.withOpacity(0.7)),
    caption: TextStyle(
        fontSize: 14.0,
        fontWeight: FontWeight.w600,
        fontFamily: 'hind',
        color: Colors.white.withOpacity(0.7)),
    button: const TextStyle(
        fontSize: 12.0,
        fontWeight: FontWeight.w500,
        color: blueText,
        fontFamily: 'hind'),
  ),
);

Then use in the view like so:

Text('Hi there, \nI\'m Vepo',
     style: Theme.of(context).textTheme.headline1,
     textAlign: TextAlign.center),
),