شارك المقالة
navigation drawer بجميع تفاصيلها في Flutter بالعربي

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'),
              ),
            ),
          ],
        ),
      ),
    );
  }
  



فيديو الشرح


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


شاهد أيضًا
مقالات ذات صلة
كيفية استخدام Fragment داخل RecyclerView ببرنامج اندرويد ستوديو Android Studio
كيفية استخدام Fragment داخل RecyclerView ببرنامج اندرويد ستوديو Android Studio

بسم الله الرحمن الرحيم ، fragment معناها باللغة العربية تعني متقسم او إنقسام وهي تعني…

شرح كيفية التعامل مع رفع الصور داخل nodejs باستخدام multer
شرح كيفية التعامل مع رفع الصور داخل nodejs باستخدام multer

تعرف على مكتبة Multer: الحل الأمثل لتحميل الملفات في Node.jsكيفية التعامل مع رفع الصور داخل…

كيف يمكن تحديث ملفات المشروع Project اندرويد ستوديو الخاص بك على منصة Github
كيف يمكن تحديث ملفات المشروع Project اندرويد ستوديو الخاص بك على منصة Github

  في دروس تطوير تطبيقات الهواتف الذكية وخاصة تطوير تطبيقات الاندرويد التي نقدمها لكم في…

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

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