انشاء Dialog في Flutter وارسال واستقبال البيانات من خلاله

يعد الDialog والعروف باسم المربع الحواري واحد من العناصر المستخدمه بشكل كبير جدا في التطبيقات وفي هذا المقال نشارك معكم كيفية استخدام هذا المربع داخل بيئة العمل flutter وكيف تستطيع ارسال واستقبال البيانات من خلاله وفي هذا الدرس سوف نقوم بارسال بيانات من الdialog الى الصفحة الرئيسية للتطبيق وهذا الامر سوف يحسن من مستواك في كيفية ارسال البيانات والتعامل مع المربع الحواري بشكل اقوى .

لغة الدرات هي لغة oop من اللغات عالية المستوى والتي تسهل على المطور التعامل مع عدة classes من اجل تنظيم العمل وهي لغة قريبة من java و python بشكل كبير اي انها قريبة من جافا وبايثون فإذا كنت قد تعاملت مع اي لغة منهم سابقا سيكون الامر بسيط بالنسبة لك بشكل كبير وايضا سنحاول من خلال المقالات شرح الاكواد المقدمه لكي تسهل عليكم الفهم واسترجاع المعلومه .

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

كود انشاء الدايلوج وارسال البيانات

لن تحتاج الى اي مكتبات خارجية لكي تتمكن من عمل المربع الحواري فقط كل ما عليك هو استخدام الامر الخاص بعرض هذا المربع وهو AlertDialog وهنا قمنا بعمل المربع داخل methode خارجية واضافة المميزات التي تضمنها بشكل سليم , مع توضيح وظيفة كل عنصر من العناصر بشكل صحيح , ويتم فتح هذا المربع عند النقر على الزر .

dart code

class Test extends StatefulWidget {

  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {

  var controller = TextEditingController();
  String name = '';

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text('Test Screen'),
      ),
      body: Container(
        padding: EdgeInsets.all(28),
        child: Column(

          children: [
            Row(
              children: [
                Expanded(child: Text('Name :' , style: TextStyle(fontWeight: FontWeight.bold),),),
                SizedBox(width: 12,),
                Text(name),
              ],
            ),
            SizedBox(height: 16,),
            Container(
              width: double.infinity,
              height: 50,
              child: ElevatedButton(
                child: Text('open dialog'),
                onPressed: () async {
                  final name = await openDialog();
                  if (name == null || name.isEmpty) return ;
                  setState(() {
                    this.name = name;
                  });
                } ,

              ),
            ),
          ],
        )

      ),
    );
  }

  Future<String?> openDialog()=> showDialog<String>(
      context: context,
      builder: (context)=> AlertDialog(
        title: Text('Dialog '),
        content: TextField(
          // فتح لوحة المفاتيح اثناء البدء
          autofocus: true,
          // تنفيذ وظيفة معينه عند الانتهاء والضغط على علامة صح الموجوده بي لوحة المفاتيح
          onSubmitted: (_)=> done(),
          controller: controller,
          decoration: InputDecoration(
            helperMaxLines: 1,
            helperText: 'Enter Name'
          ),
        ),
        actions: [
          TextButton(onPressed: done, child: Text('Done .'))
        ],
      ));


  void done() {
    Navigator.of(context).pop(controller.text);
    // ازالة جميع المحتويات عند بدء تشغيل الدايلوج
    controller.clear();
  }
}

الى هنا يكون انتهى مقال اليوم , نتمنى ان يكون المقال نال على رضاكم واستفادتم منه , ولمزيد من المقالات في تقنية فلاتر او غيرها من التقنيات يمكنكم مشاهدة باقي المقالات على الموقع .