Выход за рамки Material: добавление пользовательских цветов в тему Flutter

Хотите выйти за пределы стандартных ограничений Material Design в вашем приложении Flutter? 🤔 В этой статье мы расскажем, как создать расширение темы для добавления пользовательских цветов! 🎨

Шаг 1: Создание ThemeExtension
Для начала создайте класс, который будет предоставлять ваши цвета. Этот класс должен расширять ThemeExtension. Пример реализации:

import 'package:flutter/material.dart';

class AppareanceKitColors extends ThemeExtension<AppareanceKitColors> {
  final Color primary;
  final Color secondary;
  final Color dark;
  final Color onePrimary;
  final Color background;
  final Color onbackground;
  final Color surface;
  final Color onSurface;
  final Color grey1;
  final Color grey2;
  final Color grey3;
  final Color error;

  const AppareanceKitColors({
    required this.primary,
    required this.secondary,
    required this.dark,
    required this.onePrimary,
    required this.background,
    required this.onbackground,
    required this.surface,
    required this.onSurface,
    required this.grey1,
    required this.grey2,
    required this.grey3,
    required this.error,
  });

  factory AppareanceKitColors.light() => const AppareanceKitColors(
        primary: Color(0xFFF830FF),
        secondary: Color(0xFF3057AD),
        dark: Color(0xFF20001D),
        onePrimary: Color(0xFF110551),
        background: Color(0xFFFFFFFF),
        onbackground: Color(0xFF110551),
        surface: Color(0xFFAEAEAE),
        onSurface: Color(0xFF000000),
        grey1: Color(0xFFF9E5FF),
        grey2: Color(0xFFFFD8FF),
        grey3: Color(0xFF632338),
        error: Color(0xFFC41E1E),
      );
}

Шаг 2: Добавление расширения в тему Material
Теперь добавьте созданное расширение в вашу тему Material, используя свойство extensions:

MaterialApp(
  theme: ThemeData(
    extensions: [
      AppareanceKitColors.light(),
    ],
  ),
)

Шаг 3: Использование цветов из расширения
Чтобы получить доступ к вашим цветам в любом месте приложения, используйте следующий код:

extension AppareanceKitThemeExt on BuildContext {
  AppareanceKitColors get colors => Theme.of(this).extension<AppareanceKitColors>()!;
}

// Использование
Container(
  color: context.colors.primary,
)

Оцените новую рубрику Flutter Pulse Tips и оставьте свои отзывы! 👍💬

Все подобные новости можно найти по хэштегу #FlutterPulseTips

#flutter #dart #flutterpulse #FlutterPulseTips #mobiledevelopment #appdevelopment #uiux #codingtips #FlutterTips #ThemeExtension #CustomColors