Question 75966 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter how to get material 3 tonal palettes

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.

enter image description here

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 ✨

enter image description here

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?.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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

    enter image description here

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

  2. 0

    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);
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search