Насколько гибко Flutter может работать с темами оформления?

Flutter предоставляет ThemeData для глобального определения визуальных свойств приложения (цвета, шрифты, типографика и т.д.). Материал-виджеты используют Theme.of(context) для доступа к текущей теме.

Гибкость обеспечивается на нескольких уровнях:

• Глобальная тема: Определяется в MaterialApp или CupertinoApp и применяется ко всему приложению.
• Локальные темы: Виджеты Theme могут переопределять глобальную тему для своих дочерних элементов. Это удобно для стилизации отдельных частей UI.
• Расширение темы: Можно добавлять собственные атрибуты в ThemeData с помощью ThemeExtension.
• Адаптивные темы: Легко переключаться между светлой и темной темой, реагируя на настройки системы или пользователя.
• Настраиваемые виджеты: Создавать виджеты, которые полностью подчиняются системе тем или имеют собственные стили, не зависящие от темы.

Пример использования Theme:

// Определение глобальной темы
MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    visualDensity: VisualDensity.adaptivePlatformDensity,
  ),
  home: HomePage(),
);

// Переопределение темы для части UI
Theme(
  data: Theme.of(context).copyWith(
    primaryColor: Colors.green,
  ),
  child: ElevatedВuttonTheme( // Пример использования тематики для виджета
    data: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.green, // Переопределение цвета кнопки
      ),
    ),
    child: ElevatedButton(
      onPressed: () {},
      child: Text('Зеленая кнопка'),
    ),
  ),
);

Пример использования ThemeExtension:

// Определение расширения темы
class MyThemeExtension extends ThemeExtension<MyThemeExtension> {
  const MyThemeExtension({
    required this.customColor,
  });

  final Color customColor;

  @override
  MyThemeExtension copyWith({Color? customColor}) {
    return MyThemeExtension(
      customColor: customColor ?? this.customColor,
    );
  }

  @override
  MyThemeExtension lerp(
      covariant ThemeExtension<MyThemeExtension>? other, double t) {
    if (other is! MyThemeExtension) {
      return this;
    }
    return MyThemeExtension(
      customColor: Color.lerp(customColor, other.customColor, t)!,
    );
  }
}

// Использование расширения в ThemeData
MaterialApp(
  theme: ThemeData(
    extensions: <ThemeExtension<dynamic>>[
      MyThemeExtension(customColor: Colors.orange),
    ],
  ),
  home: Builder(
    builder: (context) {
      // Доступ к расширенным данным темы
      final myTheme = Theme.of(context).extension<MyThemeExtension>();
      return Scaffold(
        backgroundColor: myTheme?.customColor,
        body: Center(child: Text('Проверка расширения темы')),
      );
    },
  ),
);