شرح مكتبة elastic drawer لعمل تداخل بين الصور اثناء التنقل في flutter

Ahmed Mahmoud

اخر تحديث :

شرح مكتبة elastic drawer لعمل تداخل بين الصور اثناء التنقل في flutter

كما نعلم ان تقنية فلاتر تتميز بوجود الكثير من المكتبات التي من شأنها تحسين شكل التطبيق الخاص بك ومن ضمن هذة المكتبات elastic drawer وهي تقوم بعمل تداخل بين الصور وتجعل من شكل تطبيقك مختلف وهذا ما يميز هذة المكتبة يمكنك استخدامها لعمل SplashScreen على سبيل المثال في بداية عمل التطبيق او عمل تنقل بين الصور بطريقة مختلفه كما يظهر في صورة المقالة .

يعمل Flutter بجد لتوسيع قاعدة الشفرة نفسها عبر أي شيء به شاشة ، بما في ذلك Android و iOS و Web و Desktop ، يمكنك استخدام نفس قاعدة الشفرة بشكل فعال لإنشاء تطبيقات للويب سريع الاستجابة (تتنافس مع أطر عمل SPA مثل React و Angular و Vue) ، وسطح المكتب (يتنافس مع Electron و Qt) ، ونأمل أن تكون الأجهزة المضمنة والمزيد في المستقبل مع القليل من الجهد الإضافي.

تثبيت flutter تحميل flutter dartsdk شركة تطبيقات الجوال

ليس من السهل إنشاء العديد من تطبيقات Flutter (تسمى أهداف في Flutter) من قاعدة كود واحدة. من خلال شعارها "اكتب مرة واحدة ، ركض في أي مكان" ، وعدت React Native العالم أيضًا بهذا الشيئ ، ولكن كما يشهد المطورون ، فإن هذا بعيد كل البعد عن الواقع.

المكتبة المستخدمة elastic_drawer

اضف الاكواد التالية في المكان المخصص لها داخل فلاتر

elastic_drawer: ^2.0.1

الكود الموجود في الشرح

المكتبة تستخدم قيمة اساسيه واخرى فرعيه ولذلك سوف تعرض لك صورتين فقط ولكن لتخطي هذة المشكلة يمكنك عرض list of image عن طريق استخدام map وكل عنوان صورة اذا كانت تندرج اسفله مجموعة من الصور يمكنك عرضها في المربع الاخر وهو drawerChild ويمكنك عمل Click عليه بإستخدام inKwell لكي يقبل النقر وتستطيع طباعة جمله او حتى عمل انتقل الى صفحة اخرى معينه داخل التطبيق .

class GeeCoders extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElasticDrawer(
      mainColor: Colors.white,
      drawerColor: Colors.black,
      mainChild: Column(
          children: [
            Expanded(
              child: Image.network(
                'https://images.unsplash.com/photo-1639504316764-d867bcc7efff?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
                fit: BoxFit.cover,),
            )
          ]
      ),
      drawerChild: Column(
          children: [
            Expanded(
              child: InkWell(
                onTap: () {
                  ElasticDrawerKey.drawer.currentState!.closeElasticDrawer(context);
                  print('hello');
                },
                child: Image.network(
                  'https://images.unsplash.com/photo-1639433506517-4a703cb18525?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ]
      ),


    );
  }
}