البرمجة

Flutter Animated Theme Switching

إن أحد ركائز Flutter framework هو تنوع الـ packages التي تدعمها والموجودة على الرابط التالي: pub.dev، وإحداها والتي توفر animation على عملية تغيير الـ theme الخاص بالتطبيق animated_theme_switcher.

تستطيع تثبيت هذه المكتبة من خلال إضافة animated_theme_switcher إلى الـ dependencies في ملف الـ pubspec.yamel الموجود في مشروعك

dependencies:

    animated_theme_switcher: “^2.0.1”

ثم عليك أن تقوم بإحاطة الـ MaterialApp في تطبيقك بالـ ThemeProvider

ThemeProvider(
    initTheme: initTheme,
    builder: (context, myTheme) {
         return MaterialApp(
              title: ‘Flutter Demo’,
              theme: myTheme,
              home: MyHomePage(),
         );
     }),
),

والآن في الصفحة التي سنقوم فيها بتغيير الـ theme نقوم بإحاطة الصفحة بـ ThemeSwitchingArea

ThemeSwitchingArea(
     child: Builder(builder: (context) {
          return …,
    },
);

لم يتبقَّ الآن سوى إضافة الـ function التي تقوم بتغيير الـ them وتضيف الـ animation على الواجهة المفتوحة

ThemeData newTheme = ThemeData(
    primaryColor: Colors.amber
);

ThemeSwitcher(
     builder: (context) {
     …
     onTap: () => ThemeSwitcher.of(context).changeTheme(
          theme: newTheme,
          reverseAnimation: false // default: false
     );
     …
     },
);

وهكذا تكون قد أضفت animation جميلة لتطبيقك بالإضافة إلى الدعم للـ multi theme app.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *