Flutter how to get material 3 tonal palettes

Question

Using the material 3 theme builder custom colors we have 4 colors that we need to choose from: Primary, Secondary, Tertiary, Neutral.

The site then generates a full both light and dark scheme that is based on the colors.

After adding the material file to the app we can use them like that

Theme.of(context).colorScheme.primary;

In the bottom part of the custom material 3 theme builder there is part about tonal palettes ✨

Would love to use the generated tonal palettes.

I have tried Theme.of(context).colorScheme.primary[50]; and Theme.of(context).colorScheme.primary.shade50; but it does not work.

How can I use the material 3 generated tonal palette?.

Answer 1

Answer:

The generated material 3 does not bundle inside of the Theme of the app as far as I know but the good news is that you can generate it yourself from each of your colors.

Add the following package: material_color_utilities

Insert your primary color in _primaryColor to get the primary color tonal palette

    TonalPalette primaryTonalP = toTonalPalette(_primaryColor); 
    primaryTonalP.get(50); // Getting the specific color


    TonalPalette toTonalPalette(int value) {
      final color = Hct.fromInt(value);
      return TonalPalette.of(color.hue, color.chroma);
    }

And repeat for each main color in the material 3 colors

---

Bonus:

You can also generate all the material 3 theme in the app programmatically from 5 colors.

Neutral on the left is not the same as generated Neutral as shown in the image

You will need the following packages: dynamic_color, material_color_utilities

Insert your values in _primaryColor, _secondaryColor, _tertiaryColor, _neutralColor, _neutralVariantColor

    import 'package:dynamic_color/dynamic_color.dart';
    import 'package:flutter/material.dart';
    import 'package:material_color_utilities/material_color_utilities.dart';

    ThemeData get themeData {
        List<int> colors = <int>[
          ...toTonalPalette(_primaryColor).asList,
          ...toTonalPalette(_secondaryColor).asList,
          ...toTonalPalette(_tertiaryColor).asList,
          ...toTonalPalette(_neutralColor).asList,
          ...toTonalPalette(_neutralVariantColor).asList,
        ].toList();
    
        ColorScheme colorScheme =
            CorePaletteToColorScheme(CorePalette.fromList(colors))
                .toColorScheme(brightness: brightness);
    
        return ThemeData(
          useMaterial3: true,
          colorScheme: colorScheme,
        );
      }
    
    TonalPalette toTonalPalette(int value) {
        final color = Hct.fromInt(value);
        return TonalPalette.of(color.hue, color.chroma);
    }

Answer 2

Add material_color_utilities pacakge

void createTonalPalette(BuildContext context) {
  
  // Generate palette for primary
  TonalPalette primaryTonalP =
      toTonalPalette(Theme.of(context).colorScheme.primary.value);
  TonalPalette secondaryTonalP =
      toTonalPalette(Theme.of(context).colorScheme.secondary.value);

  TonalPalette tertiaryTonalP =
      toTonalPalette(Theme.of(context).colorScheme.tertiary.value);

  primaryTonalP.get(50); // Example how to use
}

TonalPalette toTonalPalette(int value) {
  final color = Hct.fromInt(value);
  return TonalPalette.of(color.hue, color.chroma);
}

Answer 3

Based on the other answers, you could also write a handy extension on Color like this:

import 'package:material_color_utilities/material_color_utilities.dart';

extension Material3Palette on Color {
  Color tone(int tone) {
    assert(tone >= 0 && tone <= 100);
    final color = Hct.fromInt(value);
    final tonalPalette = TonalPalette.of(color.hue, color.chroma);
    return Color(tonalPalette.get(tone));
  }
}

// Usage
Theme.of(context).colorScheme.primary.tone(50);