زد من احترافية مشروعك: Custom Theme Extensions في Flutter بالتفصيل (مع مثال عملي)

معلومة خفية في Flutter قد تُحدث فرقًا كبيرًا: كيف تبني ثيمات قابلة لإعادة الاستخدام بسهولة؟

يعد ThemeExtension طريقة لتوسيع السمات المخصصة في Flutter، مما يسمح لك بإضافة سمات إضافية، مثل الألوان أو الخطوط أو البيانات الأخرى القابلة للتخصيص. يتيح لك ذلك تطبيق التصميمات المخصصة وإدارتها بسهولة في جميع أجزاء التطبيق دون الحاجة إلى تكرار نفس القيم في كل مكان.

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

class AppColorsEx extends ThemeExtension<AppColorsEx> {
  final Color primaryColor;
  final Color secondaryColor;

  AppColorsEx({required this.primaryColor, required this.secondaryColor});

  @override
  ThemeExtension<AppColorsEx> copyWith({
    Color? primaryColor,
    Color? secondaryColor,
  }) {
    return AppColorsEx(
        primaryColor: primaryColor ?? this.primaryColor,
        secondaryColor: secondaryColor ?? this.secondaryColor);
  }

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

شرح الكود البرمجي المستخدم

في هذا الكود، قمنا بإنشاء ملحق لون مخصص (AppColorsEx) يتضمن لونين أساسيين: PrimaryColor وSecondaryColor.

يمكن استخدام البرنامج المساعد لتطبيق وتعديل سمات الألوان المخصصة في التطبيق.

تطبيق الألوان المخصصة في MaterialApp

MaterialApp(
  title: 'My Application Test',
  theme: ThemeData(
    extensions: [
      AppColorsEx(
        primaryColor: Color(0xfffdb56d),
        secondaryColor: Color(0xff44a4f3),
      )
    ],
  ),
  home: HomeScreen(),
);