What is the difference between primaryColor and primarySwatch in Flutter?

primarySwatch defaults to Colors.blue and sets the following fields (including primaryColor) to various shades of the MaterialColor input depending on whether the theme brightness is light or dark (default is light):

Light Themes

// The default shade for the color is used
primaryColor = primarySwatch; // [500] for normal colors and [200] for accent colors
primaryColorLight = primarySwatch[100];
primaryColorDark = primarySwatch[700];
// This can be overridden by setting accentColor (below) manually
toggleableActiveColor = primarySwatch[600];
accentColor = primarySwatch[500];
secondaryHeaderColor = primarySwatch[50];
textSelectionColor = primarySwatch[200];
textSelectionHandleColor = primarySwatch[300]
backgroundColor = primarySwatch[200];

*buttonColor is set to its default (grey[300])

Dark Themes

buttonColor = primarySwatch[600];

*The remaining fields listed above for light themes are set to their dark defaults (various shades of tealAccent, grey or black)

All Themes (light or dark)

// Brightness.dark/light is estimated based on the default shade for the color
// This also sets the bool primaryIsDark
primaryColorBrightness = estimateBrightnessForColor(primarySwatch);
// This generates the modern simplified set of theme colors flutter recommends
// using when theming Widgets based on the theme. Set it manually if you need
// more control over individual colors
colorScheme = ColorScheme.fromSwatch(
      primarySwatch: primarySwatch, // as above
      primaryColorDark: primaryColorDark, // as above
      accentColor: accentColor, // as above
      cardColor: cardColor, // default based on theme brightness, can be set manually
      backgroundColor: backgroundColor, // as above
      errorColor: errorColor, // default (Colors.red[700]), can be set manually
      brightness: brightness, // default (Brightness.light), can be set manually
    );

As mentioned in the accepted answer, only setting primaryColor could leave Widgets open to selecting some other default color (various shades of blue) based on one of the other fields above if they are not also set individually, so primarySwatch is a convenient shorthand for simple themes.

In general, however, the colorScheme field is most important as per modern conventions you should be using Theme.of(context).colorScheme.<Color> (though it may not work everywhere yet depending on when you read this).

So, if you need more control over individual theme colors, you could either make do with setting the fields used in ColorScheme.fromSwatch, or just set the primarySwatch (for backwards compatibility of Flutter Widgets that have not yet been migrated), and then set the colorScheme manually for extra control.


Post a Comment

Previous Post Next Post

Subscribe Us


Get tutorials, Flutter news and other exclusive content delivered to your inbox. Join 1000+ growth-oriented Flutter developers subscribed to the newsletter

100% value, 0% spam. Unsubscribe anytime