Flutter как получить материал 3 тональные палитры

Question

Используя пользовательские цвета конструктора тем материала 3, у нас есть 4 цвета, которые нам нужно выбрать: первичный, вторичный, третичный, нейтральный.

Затем сайт генерирует полную как светлую, так и темную схему, основанную на цветах.

После добавления файла материала в приложение мы можем использовать их так

      Theme.of(context).colorScheme.primary;

В нижней части конструктора тем пользовательских материалов 3 есть часть о тональных палитрах ✨

Хотелось бы использовать сгенерированные тональные палитры.

я пыталсяTheme.of(context).colorScheme.primary[50];иTheme.of(context).colorScheme.primary.shade50;Но это не работает.

Как я могу использовать сгенерированную тональную палитру материала 3?.

Answer 1

Отвечать:

Сгенерированный материал 3, насколько мне известно, не объединяется внутри темы приложения, но хорошая новость заключается в том, что вы можете сгенерировать его самостоятельно из каждого из ваших цветов.

Добавьте следующий пакет:

Вставьте свой основной цвет, чтобы получить тональную палитру основного цвета.

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

И повторить для каждого основного цвета в материале 3 цвета

---

Бонус:

Вы также можете программно сгенерировать всю тему материала 3 в приложении из 5 цветов.

Нейтральный слева отличается от сгенерированного нейтрального, как показано на изображении.

Вам понадобятся следующие пакеты: dynamic_color, material_color_utilitiesmaterial_color_utilities

Вставьте свои значения в_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

Добавьте пакет material_color_utilities

      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

Основываясь на других ответах, вы также можете написать удобное расширение для Color следующим образом:

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