Flutter Advanced Custom Theming: Руководство для начинающих

Flutter Advanced Custom Theming: Руководство для начинающих

FlutterPulse

Эта статья переведена специально для канала FlutterPulse. В этом канале вы найдёте много интересных вещей, связанных с Flutter. Не забывайте подписываться! 🚀

Освойте продвинутое кастомизированное оформление в Flutter с помощью ThemeExtension для динамических светлых и темных режимов в одном простом руководстве!

Полное руководство по продвинутому кастомизированному оформлению в Flutter

Введение

Оформление в Flutter имеет решающее значение для поддержания единообразного и масштабируемого интерфейса. В этой статье мы узнаем, как создать кастомизированную тему с использованием ThemeExtension для эффективного управления цветами, стилями текста и темами.

Структура папок

lib/
│── main.dart
│── theme/
│   ├── app_colors.dart
│   ├── app_color_theme.dart
│   ├── app_text_theme.dart
│   ├── app_theme.dart
│   ├── theme_data_extension.dart
│── utilities/
│   ├── constants.dart
  1. Определяет цвета

Этот файл определяет базовые цвета используемые в приложении.

// theme/app_colors.dart
import 'package:flutter/material.dart';

class AppColors {
  static const Color white = Color(0xFFFFFFFF);
  static const Color green = Color(0xFF6FD87B);
  static const Color black = Color(0xFF323232);
  static const Color red = Color(0xFFEA3223);
  static const Color gray = Color(0xFFC5C5C5);
  static const Color lightGray = Color(0xFFC5C5C5);
  static const Color orange = Color(0xFFFF8A00);

}
  • Централизованное управление цветами.
  • Легко обновлять цвета для всего приложения.

2. Управляет цветами светлой и темной темы

Этот файл расширяет тему с вариациями цветов для светлой и темной тем.

// theme/app_color_theme.dart
import 'package:flutter/material.dart';
import 'app_colors.dart';

class AppColorTheme extends ThemeExtension<AppColorTheme> {
  final Color white;
  final Color green;
  final Color black;
  final Color red;
  final Color gray;
  final Color lightGray;
  final Color orange;

  // Цвета светлой темы
  AppColorTheme({
    this.white = AppColors.white,
    this.green = AppColors.green,
    this.black = AppColors.black,
    this.gray = AppColors.gray,
    this.lightGray = AppColors.lightGray,
    this.orange = AppColors.orange,
    this.red = AppColors.red,
  });

  // Цвета темной темы
  factory AppColorTheme.dark() {
    return AppColorTheme(
      white: AppColors.black,
      black: AppColors.white,
      gray: const Color.fromARGB(255, 46, 21, 21),
      lightGray: const Color.fromARGB(255, 79, 64, 64),
    );
  }

  @override
 /// Для переопределения значений цвета по умолчанию.
  ThemeExtension<AppColorTheme> copyWith({
    Color? white,
    Color? green,
    Color? black,
    Color? red,
    Color? gray,
    Color? lightGray,
    Color? orange,
  }) {
    return AppColorTheme(
      white: white ?? this.white,
      green: green ?? this.green,
      black: black ?? this.black,
      red: red ?? this.red,
      gray: gray ?? this.gray,
      lightGray: lightGray ?? this.lightGray,
      orange: orange ?? this.orange,
    );
  }

  @override
  ThemeExtension<AppColorTheme> lerp(
      covariant ThemeExtension<AppColorTheme>? other, double t) {
    return this;
  }
}
  • Поддерживает светлые и темные темы
  • Обеспечивает гибкость с помощью copyWith() для кастомизации цветов.

3. Управляет стилями текста

Этот файл определяет стили текста (крупный текст, обычный текст, мелкий текст и т. д.).

// theme/app_text_theme.dart
import 'package:flutter/material.dart';
import '../utilities/constants.dart';
import 'app_colors.dart';

abstract class AppTextThemeBaseModel {
  TextStyle get bigText;
  TextStyle get text;
  TextStyle get smallText;
  TextStyle get verySmallText;
}

class AppTextTheme extends ThemeExtension<AppTextTheme>
    implements AppTextThemeBaseModel {
  double bigTextFontSize = 18;
  double normalTextFontSize = 16;
  double smallTextFontSize = 12;
  double verySmallTextFontSize = 8;

  @override
  TextStyle get bigText => TextStyle(
        fontSize: bigTextFontSize,
        color: AppColors.black,
        fontWeight: FontWeight.normal,
        fontFamily: Constants.fontFamily,
      );

  /// Размер шрифта: 16, Начертание: Нормальное
  @override
  TextStyle get text => TextStyle(
        fontSize: normalTextFontSize,
        color: AppColors.black,
        fontWeight: FontWeight.normal,
        fontFamily: Constants.fontFamily,
      );

  @override
  TextStyle get smallText => TextStyle(
        fontSize: smallTextFontSize,
        color: AppColors.black,
        fontWeight: FontWeight.w500,
        fontFamily: Constants.fontFamily,
      );

  @override
  TextStyle get verySmallText => TextStyle(
        fontSize: verySmallTextFontSize,
        color: AppColors.black,
        fontWeight: FontWeight.normal,
        fontFamily: Constants.fontFamily,
      );

  @override
  ThemeExtension<AppTextTheme> copyWith({
    double? bigTextFontSize,
    double? normalTextFontSize,
    double? smallTextFontSize,
    double? verySmallTextFontSize,
  }) {
    return AppTextTheme()
      ..bigTextFontSize = bigTextFontSize ?? this.bigTextFontSize
      ..normalTextFontSize = normalTextFontSize ?? this.normalTextFontSize
      ..smallTextFontSize = smallTextFontSize ?? this.smallTextFontSize
      ..verySmallTextFontSize =
          verySmallTextFontSize ?? this.verySmallTextFontSize;
  }

  @override
  ThemeExtension<AppTextTheme> lerp(
      covariant ThemeExtension<AppTextTheme>? other, double t) {
    return this;
  }
}
  • Определяет кастомизированные стили текста которые легко обновлять.
  • Поддерживает единообразие типографики по всему приложению.

4. Объединяет цвета и стили текста

Этот файл объединяет цветовые и текстовые темы в светлые и темные темы.

// theme/app_theme.dart
import 'package:flutter/material.dart';
import '../utilities/constants.dart';
import 'app_color_theme.dart';
import 'app_text_theme.dart';

class AppTheme {
  static ThemeData lightTheme() => ThemeData(
        fontFamily: Constants.fontFamily,
        useMaterial3: true,
        extensions: [
          AppColorTheme(),
          AppTextTheme(),
        ],
      );

  static ThemeData darkTheme() => ThemeData(
        useMaterial3: true,
        fontFamily: Constants.fontFamily,
        extensions: [
          AppColorTheme.dark(),
          AppTextTheme(),
        ],
      );
}
  • Объединяет цвета и шрифты в единую тему.
  • Предоставляет светлую и тёмную темы.

5. Упрощает доступ к теме

Этот файл расширяетThemeData и BuildContext для более лёгкого доступа к теме.

// theme/theme_data_extension.dart
import 'package:flutter/material.dart';
import 'app_color_theme.dart';
import 'app_text_theme.dart';

extension ThemeDataExtension on ThemeData {
  AppColorTheme get appColorTheme =>
      extension<AppColorTheme>() ?? AppColorTheme();
  AppTextTheme get appTextTheme => extension<AppTextTheme>() ?? AppTextTheme();
}

extension ThemeContext on BuildContext {
  AppColorTheme get appColorTheme =>
      Theme.of(this).extension<AppColorTheme>() ?? AppColorTheme();
  AppTextTheme get appTextTheme =>
      Theme.of(this).extension<AppTextTheme>() ?? AppTextTheme();
}
  • Позволяет быстрый доступ к цветам и стилям текста с помощью context.

6. Применение тем в приложении

Наконец, мы применяем наши пользовательские темы в MaterialApp.

// main.dart
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: AppTheme.lightTheme(),
      darkTheme: AppTheme.darkTheme(),
      themeMode: ThemeMode.system,
    );
  }
}

Как использовать в интерфейсе?

// Использование с классом Theme
Text(
   "Привет, мир.",
   style: Theme.of(context).appTextTheme.bigText.copyWith(// Доступ к шрифтам через класс Theme
          color: Theme.of(context).appColorTheme.black, // Доступ к цветам темы через класс Theme
       ),
),

// Использование с BuildContext (Удобный доступ😊)
Text(
   "Привет, мир.",
   style: context.appTextTheme.bigText.copyWith( // Удобный доступ к шрифтам через context😊
          color: context.appColorTheme.black, // Удобный доступ к цветам темы через context😊
       ),
),

🎉 Заключение

  • Мы создали пользовательскую систему тем для масштабируемого интерфейса.
  • Поддерживает светлую и тёмную темы.
  • Лёгкий доступ к цветам и шрифтам.

🚀 Теперь ваше приложение Flutter имеет продвинутую настройку тем!

Если вам была полезна эта статья, пожалуйста, поставьте ей лайк 👏 и оставьте комментарий 🗨️, чтобы побудить меня писать больше!

Счастливого кодинга 😊!

Report content on this page

Report Page

Please submit your DMCA takedown request to dmca@telegram.org