Quelle est la différence entre primaryColor et primarySwatch dans Flutter ?

Question

Dans Flutter, on peut appliquer un thème à l'application en utilisant la classe ThemeData. Mais il y a deux propriétés de cette classe qui me déroutent : primaryColor y primarySwatch . Quelle est la différence entre ces deux propriétés et quand utiliser l'une ou l'autre ? Merci.

Answer 1

primarySwatch es no a Color . C'est MaterialColor . Ce qui signifie qu'il s'agit des différentes nuances d'une couleur qu'une application matérielle utilisera.

primaryColor est l'une de ces teintes. Pour être exact, primaryColor est normalement égal à primarySwatch[500] .

Il est généralement préférable de définir un primarySwatch au lieu de primaryColor . Étant donné que certains composants du matériau peuvent utiliser une teinte différente de la primaryColor pour des choses comme l'ombre, la bordure, ...

Answer 2

Ce qui suit est tiré de ma lecture de theme_data.dart :

primarySwatch La valeur par défaut est Colors.blue et définit les champs suivants (y compris primaryColor ) à diverses nuances de la MaterialColor selon que le thème brightness est clair ou foncé (par défaut, clair) :

Thèmes légers

// 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 est fixé à sa valeur par défaut (gris[300])

Thèmes sombres

buttonColor = primarySwatch[600];

*Les autres champs énumérés ci-dessus pour les thèmes clairs sont définis par défaut pour les thèmes foncés (diverses nuances de sarcelleAccent, gris ou noir).

Tous les thèmes (clairs ou foncés)

// 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
    );

Comme mentionné dans la réponse acceptée, seul le réglage primaryColor pourrait laisser les widgets ouverts à la sélection d'une autre couleur par défaut (diverses nuances de bleu) basée sur l'un des autres champs ci-dessus s'ils ne sont pas également définis individuellement, donc primarySwatch est un raccourci pratique pour les thèmes simples.

En général, cependant, le champ colorScheme est le plus important car, selon les conventions modernes, vous devriez utiliser les éléments suivants Theme.of(context).colorScheme.<Color> (bien que cela ne fonctionne pas encore partout, selon le moment où vous lisez ces lignes).

Ainsi, si vous avez besoin de plus de contrôle sur les couleurs des thèmes individuels, vous pouvez soit vous contenter de définir les champs utilisés dans le champ ColorScheme.fromSwatch ou simplement définir l'option primarySwatch (pour assurer la rétrocompatibilité des widgets Flutter qui n'ont pas encore été migrés), puis définissez l'attribut colorScheme manuellement pour un contrôle supplémentaire. Voir aussi ce document pour plus d'informations

Answer 3

Swatch est une catégorie. Couleur est une gamme dans cette catégorie, mais ne s'y limite pas. En fonction de la couleur de l'échantillon que vous spécifiez, Flutter peut choisir une couleur d'arrière-plan et d'avant-plan qu'il juge appropriée pour un composant.

tldr ;

Il est important de comprendre la différence entre un échantillon et une couleur. Un échantillon est une catégorie de couleur . Il est de type MaterialColor Le matériau a les teintes ci-dessous, plus le blanc. (ignorez 50)

.

Chaque échantillon présente différentes gammes. Un individu dans un échantillon/une gamme est une couleur. bien que vous n'y soyez pas limité. Vous pouvez spécifier n'importe quel code couleur valide, même s'il ne fait pas partie d'une gamme de couleurs.

.

En fonction de la couleur de l'échantillon que vous spécifiez, Flutter peut choisir une couleur d'arrière-plan et d'avant-plan qu'il juge appropriée pour un composant.

.

Voici une liste de tous les échantillons et de leurs couleurs. Capture d'écran tirée de https://material.io/design/color/the-color-system.html#tools-for-picking-colors

Answer 4

La surveillance primaire est MatériauCouleur .

/// Defines a single color as well a color swatch with ten shades of the color.
///
/// The color's shades are referred to by index. The greater the index, the
/// darker the color. There are 10 valid indices: 50, 100, 200, ..., 900.
/// The value of this color should the same the value of index 500 and [shade500].     
/// hex_value1 = 0xFFAAD401; hex_value2 = 0xFFAAD403; ...
MaterialColor myGreen = const MaterialColor(0xFFAAD400,
      const {
        50 : const Color(hex_value1),
        100 : const Color(hex_value2),
        200 : const Color(hex_value3),
        300 : const Color(hex_value4),
        400 : const Color(hex_value5),
        500 : const Color(hex_value6),
        600 : const Color(hex_value7),
        700 : const Color(hex_value8),
        800 : const Color(hex_value9),
        900 : const Color(hex_value10)});
// use MaterialColor: myGreen.shade100,myGreen.shade500 ...
myGreen.shade50 // Color === 0xFFAAD401