Change AppBar shadow(elevation) color for darkTheme

Question

I am trying to change the appBar elevation color for darkTheme. On light theme I do not mind the original color, but for dark color, it doesn't even look like it has a color because the same dark color stays.

Any ideas how we could change that color only for the dark theme?

--------------------------------------------------------------------------->

Notice how dark theme doesn't include an elevation color that contrasts at least and I haven't been able to find a way to change it.

Answer 1

You can create themes of both light and dark mode,

//For dark mode
  ThemeData _buildDarkTheme() {
    final Color primaryColor = AppColors.themeColor;
    const Color secondaryColor = Color(0xffff5722);
    final ThemeData base = ThemeData(
      brightness: Brightness.dark,
      accentColorBrightness: Brightness.light,
      appBarTheme: AppBarTheme(
        elevation: 8,
        ....
      ),
    );
    return base;
  }

//For light mode,
  ThemeData _buildLightTheme() {
    const Color primaryColor = Color(0xFF008FD1);
    const Color secondaryColor = Color(0xffff5722);
    final ThemeData base = ThemeData(
      brightness: Brightness.light,
      accentColorBrightness: Brightness.dark,
    );
    return base;
  }
  final ThemeData kLightGalleryTheme = _buildLightTheme();
  final ThemeData kDarkGalleryTheme = _buildDarkTheme();

Then apply theme like this,

  runApp(MaterialApp(
    theme: kLightGalleryTheme,
    darkTheme: kDarkGalleryTheme,
    debugShowCheckedModeBanner: false,
    title: 'Named Routes Demo',
  ));