CODEWITHSUNDEEP
flutterdartmaterial-design
Ajay
Ajay

Reputation: 6590

Flutter app bar background color from seed not working

I am developing one app in Flutter. In this, I am trying to use useMaterial3 in ThemeData. So I used below code to set color in colorScheme.

static ThemeData lightThemeData = ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.red,
    ),
    appBarTheme: AppBarTheme(
      centerTitle: true,
      elevation: 2,
      titleTextStyle: textTheme.titleLarge,
    ),
  );

I have assigned above lightThemeData in Main.dart to theme property. AppBar not showing proper color when I run the app. Please check below screenshot.

enter image description here

It is not showing proper Red Color. Anyone know, why this is happening?

Flutter version: 3.0.1

Note: It is working on Flutter v2.10.5 but not on 3.0.1

Upvotes: 2

Views: 8749

Answers (3)

Samandeep Singh
Samandeep Singh

Reputation: 1

Your app generates a [ColorScheme] derived from the given seedColor.

Using the seedColor as a starting point, a set of tonal palettes are constructed. These tonal palettes are based on the Material 3 Color system and provide all the needed colors for a [ColorScheme].

Alternately, if you want any of your Widgets to have the exact same color as your provided seed color, you should provide it with background and foreground color, e.g.:

AppBar(
        backgroundColor: Theme.of(context).colorScheme.primary,
        foregroundColor: Theme.of(context).colorScheme.onPrimary,
      ),

using this your appbar will look the exact colors as your seed color.

Upvotes: 0

Umut
Umut

Reputation: 94

You can use something like this for the full red experience:

static ThemeData lightThemeData = ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.red,
      primary: Colors.red,
      secondary: Colors.red,
    ),
    appBarTheme: AppBarTheme(
      color: Colors.red,
      //other options
    ),
  );

Alternatively you can use fromSwatch like this:

static ThemeData lightThemeData = ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.red),
    appBarTheme: AppBarTheme(
      color: Colors.red,
      //other options
    ),
  );

But make sure to test every part of your app before using it because the documentation says:

For historical reasons, instead of using a [colorSchemeSeed] or [colorScheme], you can provide either a [primaryColor] or [primarySwatch] to construct the [colorScheme], but the results will not be as complete as when using generation from a seed color.

I think fromSwatch is designed for Material Design 2.

Following contains an external tool:

For the absolute control over the colors there is a nice tool at https://m3.material.io/theme-builder#/custom From the left bar choose your colors, and export the result using the top right button(there is a Flutter option). Downloaded file contains the full schemes. You can override the colors you don't like and feed into the theme directly.

Upvotes: 2

Tasnuva Tavasum oshin
Tasnuva Tavasum oshin

Reputation: 4750

The seed color is used directly to create the tonal palette for primary tones. The ColorScheme.primary is then assigned tone 40 for light mode and tone 80 for dark mode, from the same tonal palette. Neither of these colors will be an exact match for the "primary" seed color you used, it will be a color from a tonal palette that matches the seed color, since it is the primary one.

Branding challange

If you for branding purposes require it to exactly match the provided seed color, you can always override ColorScheme.primary you got with copyWith using the original seed color. And then use that ColorScheme as input to your apps ThemeData. A bit of an extra step, but it will work and look OK too, because for primaries the other colors will still match and be in sync with this color.

Upvotes: 1

Related Questions