I have a ListView with ListTile in my screen and I have define two theme in materialApp and changing the themeMode based on the state of the themeBloc like this.
MaterialApp(
theme: AppTheme.light,
darkTheme: AppTheme.dark,
themeMode: context.watch<ThemeBloc>().state,
),
But the color in the list tile trailing text widget is not changing when I switch the theme.
ListTile(
leadingAndTrailingTextStyle : Theme.of(context).textTheme.labelMedium,
title: Text(state.data.elementAt(index).stockName),
trailing: Text("My text which should change color based on theme"),
),
The labelMedium has two diffrent colors in light and dark theme
static ThemeData light = ThemeData(
useMaterial3: true,
colorScheme: lightColorScheme,
brightness: Brightness.light,
fontFamily: GoogleFonts.montserrat().fontFamily,
textTheme: TextTheme(
labelMedium: TextStyle(
color: lightColorScheme.onPrimaryContainer,
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
);
static ThemeData dark = ThemeData(
useMaterial3: true,
colorScheme: darkColorScheme,
brightness: Brightness.dark,
fontFamily: GoogleFonts.montserrat().fontFamily,
textTheme: TextTheme(
labelMedium: TextStyle(
color: darkColorScheme.onPrimaryContainer,
fontSize: 16,
fontWeight: FontWeight.w500,
),
),
);
I have a switch in app bar to toggle the theme from light to dark which adds an event in ThemeBloc. The color of the list tile changes from black to white if i dont give any textStyle to trailing widget, but when i give my style it does not work.
And one more thing if i switch to dark theme the color does not change but when i go to another screen and come back to this screen the color is changed.
I have tried to give same style to the Text widget but it also doesn't work.
EDIT : Check this example https://zapp.run/edit/flutter-zr3806pdr390?entry=lib/main.dart&file=lib/main.dart
The Second screen does not work but third screen works.