flutterflutter-themeflutter-material

Flutter ColorScheme not applying colors


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.

Light theme screenshot

Here is what I see in Dark Theme.

dark theme screenshot

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?

dark theme appbar


Solution

  • 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,
        );
      }
    }