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

Ahmed Mahmoud

اخر تحديث :

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

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

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

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

ببساطة سوف نقوم بعمل drawer ونضع بداخله الDrawer وبداخله الlist وهيا عباره عن قائمة تحتوي على عناصر قمت هنا بعمل تصميم بداخل الDrawerHeader وهذا يعد جزء في اعلى ال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'),
              ),
            ),
          ],
        ),
      ),
    );
  }