Flutter ListTile text does not change theme/color when switched from light to dark

185 Views Asked by At

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.

0

There are 0 best solutions below