Flutter ColorScheme not applying colors

Question

I'm trying to use a dark theme in a Flutter app but everything seems wrong. I'm using dark theme like this.

ThemeData darkTheme = ThemeData.from(
  useMaterial3: true,
  colorScheme: ColorScheme.dark(
    brightness: Brightness.dark, // tried with or without this line
  ),
  textTheme: GoogleFonts.robotoTextTheme(),
);

With this ThemeData my app's background is dark but the texts are also dark which should not be dark.

Here is what I see in Light Theme.

Here is what I see in Dark Theme.

I can't see why the Categories text is black.

This is my Text Widget:

const Text(
  'Categories',
  style: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
  ),
),

I want it to be in a light color when I don't give any color values to the Text widgets.

I've tried to use ColorScheme with a seed,

I've tried also set all custom colors in ColorScheme like onPrimary, onBackground -and all the others- but the Text was still a black color.

In the AppBar on the otherhand, it works just right. White text on a black background.

What am I missing?

Answer 1

You need to pass current theme's textTheme to GoogleFonts.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: _buildTheme(Brightness.light),
        darkTheme: _buildTheme(Brightness.dark),
        themeMode: ThemeMode.dark,
        home: const Home());
  }

  ThemeData _buildTheme(Brightness brightness) {
    var baseTheme = ThemeData(brightness: brightness);

    return baseTheme.copyWith(
      colorScheme: _customColorScheme,
      textTheme: GoogleFonts.lobsterTextTheme(baseTheme.textTheme),
      useMaterial3: true,
    );
  }
}