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?

score 2 · Accepted Answer · answered Mar 15 '23 at 02:07

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

score 0 · Answer 2 · answered Mar 14 '23 at 22:39

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
);

answered Mar 14 '23 at 22:39

Abdelaziz HADIAT ALLAH

360
1
4
11

You cant set color parameter inside `GoogleFonts.robotoTextTheme`. – Soliev Mar 15 '23 at 02:11
That was not 100% true. GoogleFonts.robotoTextTheme does not take any color argument. It takes a TextTheme argument so I solved the problem by adding a default text theme inside of robotoTextTheme like this; textTheme: GoogleFonts.robotoTextTheme( ThemeData.dark().textTheme, ), – Emre Mar 15 '23 at 15:01
1

I don't have my IDE now so I just gave you an idea where you can add parameters . – Abdelaziz HADIAT ALLAH Mar 15 '23 at 15:25

Flutter ColorScheme not applying colors

2 Answers2