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