Question 75766 in Flutter Question posted in
The official Flutter documentation can be found here.

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

Tags:

2

Answers


  1. 0

    Add color inside GoogleFonts.robotoTextTheme()

    like this code

    ThemeData darkTheme = ThemeData.from(
  useMaterial3: true,
  colorScheme: ColorScheme.dark(
    brightness: Brightness.dark, // tried with or without this line
  ),
  textTheme: GoogleFonts.robotoTextTheme(color: Colors.white), //change it with the color you want
);
    Login or Signup to reply.
  2. 0

    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,
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search