شارك المقالة

navigation drawer بجميع تفاصيلها في Flutter بالعربي


navigation drawer بجميع تفاصيلها في Flutter

يعد الnavigation drawer من العناصر الاساسيه في التطبيقات وهو بكل بساطه عباره عن شريط جانبي يظهر عند النقر عليه ويمكنك وضع اي تصميم وكود تريده في هذا الشريط الجانبي وفي هذه المقالة سوف نشرح لكم كيف تقوم بالتعامل مع الnavigation drawer بكل سهوله وماهي خصائصه وكل شيئ عنه تقريبا وهو بسيط جدا وغير معقد .


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


شرح استخدام الnavigation drawer في فلاتر بشكل مبسط

ببساطة سوف نقوم بعمل drawer ونضع بداخله الDrawer وبداخله الlist وهيا عباره عن قائمة تحتوي على عناصر قمت هنا بعمل تصميم بداخل الDrawerHeader وهذا يعد جزء في اعلى الdrawer قمت بوضع به صورة ونص بسيط كما هو موضح , وفي الاسفل قمت بعمل تصميم عباره عن نص وايقونه كما هو موضح ويمكنك تنفيذ اي كود مع الضغطه .


شرح استخدام الnavigation drawer في فلاتر بشكل مبسط

defaultDrawer.dart

  final GlobalKey<ScaffoldState> _key = GlobalKey(); // Create a key


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _key,
      appBar: AppBar(),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              MaterialButton(onPressed: (){
                _key.currentState!.openDrawer();
              }, child: Text("Click me"),),
            ],
          ),
        ),
      ),
      drawer: Drawer(
        child: ListView(
          children: [
            DrawerHeader(
              decoration: BoxDecoration(color: Colors.blue),
              padding: EdgeInsets.all(10),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    width: 70,
                    height: 70,
                    child: CircleAvatar(
                      backgroundImage: AssetImage('assets/img/background/image-5.png'),
                    ),
                  ),
                  SizedBox(
                    height: 10,
                  ),
                  Text('GeeCoders'),
                ],
              ),
            ),
            GestureDetector(
              onTap: (){
                print('clicked');
              },
              child: ListTile(
                leading: Icon(
                  Icons.home,
                  color: Colors.redAccent,
                ),
                title: Text('Home Page'),
              ),
            ),
            ListTile(
              leading: Icon(
                Icons.fiber_new,
                color: Colors.redAccent,
              ),
              title: Text('Second Page'),
            ),
            GestureDetector(
              onTap: (){
                Navigator.pop(context);
              },
              child: ListTile(
                leading: Icon(
                  Icons.accessibility,
                  color: Colors.redAccent,
                ),
                title: Text('Third Page'),
              ),
            ),
          ],
        ),
      ),
    );
  }
  



فيديو الشرح


مزيد من الدروس :


شاهد أيضًا
مقالات ذات صلة
شرح كيفية الانتقال الى عنصر معين داخل الrecyclerView وتغيير العناصر بشكل تلقائي

شرح كيفية الانتقال الى عنصر معين داخل الrecyclerView وتغيير العناصر بشكل تلقائي في هذا المقال…

كيفية إنشاء bottomNavigationBar تفاعلي مع animation في Flutter

إنشاء bottom_bar مع animation بين التغيير للعناصر في تطبيقات Flutter يوجد الكثير من المكتبات التي…

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

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

🚫 مانع الإعلانات مفعل

يجب إيقاف مانع الإعلانات لاستكمال تصفح الموقع