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

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

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

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

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,
                ),
              ),
            ),
          ]
      ),


    );
  }
}

لمزيد من الاكواد يمكنك مشاهدة الموقع للاستفادة من باقي الاكواد التي نقوم بتنزيلها لكم بشكل مجاني من اجل تحسين التطبيق الخاص بك