الشروع في العمل مع حزمة GetX في تطبيقات Flutter

نشرت: 2022-03-10
ملخص سريع GetX هو حل إضافي خفيف الوزن للحالة والتنقل وإدارة التبعيات لتطبيقات Flutter. في هذه المقالة ، سننظر في فوائدها وميزاتها وكيفية البدء في استخدامها في تطبيقات Flutter.

Flutter هي إحدى أسرع الطرق لإنشاء تطبيقات أصلية عبر الأنظمة الأساسية. يوفر ميزات تسمح للمطور ببناء تجربة واجهة مستخدم جميلة حقًا لمستخدميه.

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

خذ على سبيل المثال النموذج المعياري المطلوب للتنقل إلى شاشة في تطبيق Flutter. لنفترض أنك تريد الانتقال إلى شاشة تسمى AboutScreen . سيكون عليك أن تكتب:

 Navigator.push( context, MaterialPageRoute(builder: (context) => AboutScreen()), );

سيكون من الأكثر كفاءة وملاءمة للمطورين أن تفعل شيئًا مثل:

 Get.to(AboutScreen());

عندما تحتاج إلى العودة إلى الصفحة السابقة في Flutter ، فسيتعين عليك كتابة:

 Navigator.pop(context);

ستلاحظ أننا نعتمد دائمًا على خاصية السياق لشيء شائع مثل التنقل بين الشاشات. ماذا لو استطعنا بدلاً من ذلك فعل شيء كهذا:

 Get.back();

الأمثلة المذكورة أعلاه هي بعض الطرق التي يمكن من خلالها تحسين تطوير التطبيقات في Flutter ليكون أكثر سهولة وكفاءة مع أقل نموذجية. إذا كنت تفضل البساطة والفعالية في بناء الميزات والأفكار ، فستثير اهتمامك في Flutter حزمة Get.

المزيد بعد القفز! أكمل القراءة أدناه ↓

ما هو برنامج GetX

Get or GetX هو إطار عمل سريع ومستقر وخفيف للغاية لبناء تطبيقات Flutter.

يأتي GetX خارج الصندوق مع إدارة الحالة عالية الأداء ، وحقن التبعية الذكي ، وإدارة المسار بطريقة مبسطة وعملية.

يهدف GetX إلى تقليل النماذج المعيارية مع توفير بنية بسيطة وبديهية للمطورين لاستخدامها أثناء إنشاء تطبيقاتهم. في صميم GetX توجد هذه المبادئ الثلاثة:

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

ميزات GetX

يأتي GetX مع اثنين من الميزات التي ستحتاجها في تطوير تطبيقك اليومي في Flutter. دعونا ننظر إليهم:

إدارة الدولة

إحدى الميزات الرئيسية لبرنامج GetX هي ميزة إدارة الحالة البديهية. يمكن تحقيق إدارة الحالة في GetX بقليل من البيانات المعيارية أو بدونها على الإطلاق.

إدارة الطريق

يوفر GetX واجهة برمجة تطبيقات للتنقل داخل تطبيق Flutter. واجهة برمجة التطبيقات هذه بسيطة وذات حاجة أقل للرموز.

إدارة التبعية

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

تدويل

يوفر GetX i18n خارج منطقة الجزاء مما يسمح لك بكتابة تطبيقات بدعم مختلف للغات.

تصديق

يوفر GetX طرقًا للتحقق من صحة الإدخال في تطبيقات Flutter. هذا مناسب تمامًا لأنك لن تحتاج إلى تثبيت حزمة تحقق منفصلة.

تخزين

يوفر GetX قيمة مفتاح سريعة وخفيفة جدًا ومتزامنة في الذاكرة ، والتي تقوم بنسخ البيانات احتياطيًا إلى القرص في كل عملية. تمت كتابته بالكامل بلغة Dart ويتكامل بسهولة مع حزمة GetX الأساسية.

الشروع في العمل مع GetX

الآن بعد أن رأيت ما هو GetX والميزات والفوائد التي يوفرها ، دعنا نرى كيفية إعداده في تطبيقك. سننشئ تطبيقًا تجريبيًا لرؤية معظم الميزات التي ذكرناها أثناء العمل. هيا بنا نبدأ.

إنشاء تطبيق Flutter جديد تمامًا

سنبدأ بإنشاء تطبيق Flutter جديد تمامًا من خلال Flutter CLI. أفترض أن جهازك قد تم إعداده بالفعل لتطوير التطبيقات باستخدام Flutter. لذلك نجري:

 flutter create getx_demo

سيؤدي هذا إلى إنشاء الكود الأساسي المطلوب لتطبيق Flutter. بعد ذلك ، افتح المشروع الذي أنشأته للتو في المحرر الذي تختاره (سنستخدم VS Code لهذه المقالة). سنقوم بعد ذلك بتشغيل المشروع للتأكد من أنه يعمل بشكل جيد (تأكد من أن لديك إما جهاز متصل أو محاكي / محاكي قيد التشغيل).

عند تشغيل التطبيق ، سترى تطبيق العداد الافتراضي الذي يوفره لك Flutter عند إنشاء تطبيق Flutter جديد. ما سنفعله هو تنفيذ نفس تطبيق العداد ولكن مع GetX لإدارة حالة التطبيق (وهو متغير العد).

سنبدأ بمسح main.dart وترك هذا المقتطف من الكود فقط:

 # main.dart import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

في الوقت الحالي ، كان قد تم كسر تطبيقنا نظرًا لعدم وجود أداة MyHomePage بعد الآن. دعونا نصلح ذلك. مع GetX ، لا نحتاج إلى أدوات ذات حالة جيدة ويمكن أيضًا فصل واجهة المستخدم الخاصة بنا بوضوح عن منطق العمل الخاص بنا. لذلك سننشئ دليلين داخل lib/ . هذه الأدلة هي:

views/ لعقد الشاشات في تطبيقنا.
controllers/ لعقد جميع وحدات التحكم للشاشات في تطبيقنا.

لنقم بإنشاء عنصر واجهة مستخدم MyHomePage داخل العروض views/ . سيكون اسم الملف هو my_home_page.dart . بعد إنشائه ، أضف مقتطف الشفرة التالي إليه:

 import 'package:flutter/material.dart'; class MyHomePage extends StatelessWidget { final String title; MyHomePage({this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Text( '0', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: null, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }

الآن لدينا أداة MyHomePage ، دعنا نستوردها في main.dart . أضف بيان الاستيراد إلى الجزء العلوي من main.dart أسفل import 'package:flutter/material.dart';

 import './views/my_home_page.dart';

الآن يجب أن يبدو ملف main.dart الخاص بك كما يلي:

 import 'package:flutter/material.dart'; import './views/my_home_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

عند حفظ تطبيقك الآن ، يجب إصلاح جميع الأخطاء وسيتم تشغيل التطبيق. لكن ستلاحظ عند النقر فوق الزر مرة أخرى ، لن يتم تحديث العداد. إذا نظرت إلى views/my_home_page.dart code ، فسترى أننا نقوم فقط بترميز 0 كقيمة لعنصر واجهة مستخدم النص ونمرر قيمة null إلى معالج onPressed للزر. دعنا نجلب GetX إلى المزيج لإعادة تشغيل التطبيق مرة أخرى.

تثبيت برنامج GetX

توجه إلى صفحة التثبيت الخاصة بـ GetX على pub.dev وسترى سطر التعليمات البرمجية المراد نسخه لوضعه في ملف pubspec.yml لتثبيت GetX. اعتبارًا من وقت كتابة هذا المقال ، الإصدار الحالي من GetX هو 3.23.1. لذلك سنقوم بنسخ السطر:

 get: ^3.23.1

ثم قم بلصقه أسفل قسم dependencies في ملف pubspec.yml الخاص بنا. عند حفظ الملف ، يجب تثبيت get تلقائيًا نيابة عنك. أو يمكنك التشغيل يدويًا في جهازك.

 flutter pub get

يجب أن يبدو قسم التبعيات في ملف pubspec.yml كما يلي:

 dependencies: flutter: sdk: flutter get: ^3.23.1

GetxController

لقد ذكرنا أن GetX يسمح لك بفصل واجهة المستخدم الخاصة بتطبيقك عن المنطق. يقوم بذلك من خلال توفير فئة GetxController التي يمكنك أن ترثها لإنشاء فئات تحكم لعروض تطبيقك. بالنسبة لتطبيقنا الحالي ، لدينا طريقة عرض واحدة لذلك سننشئ وحدة تحكم لهذا العرض. توجه إلى controllers/ الدليل وقم بإنشاء ملف يسمى my_home_page_controller.dart . سيؤدي هذا إلى الاحتفاظ بوحدة التحكم في طريقة عرض MyHomePage .

بعد إنشاء الملف ، قم أولاً باستيراد حزمة GetX عن طريق إضافتها إلى أعلى الملف:

 import 'package:get/get.dart';

ثم ستقوم بإنشاء فئة تسمى MyHomePageController بداخلها وتوسيع فئة GetxController . هكذا يجب أن يبدو الملف بالشكل:

 import 'package:get/get.dart'; class MyHomePageController extends GetxController {}

دعنا نضيف حالة العد إلى الفصل الذي أنشأناه.

 final count = 0;

في GetX ، لجعل متغيرًا يمكن ملاحظته - هذا يعني أنه عندما يتغير ، سيتم إخطار أجزاء أخرى من تطبيقنا اعتمادًا عليه. للقيام بذلك ، نحتاج ببساطة إلى إضافة .obs إلى تهيئة المتغير. لذلك بالنسبة لمتغير count أعلاه ، سنضيف .obs إلى 0 . لذلك سيبدو الإعلان أعلاه الآن كما يلي:

 final count = 0.obs;

هكذا يبدو ملف وحدة التحكم لدينا في الوقت الحالي:

 import 'package:get/get.dart'; class MyHomePageController extends GetxController { final count = 0.obs; }

لإنهاء الأشياء باستخدام MyHomePageController ، سنقوم بتنفيذ طريقة increment . هذا هو المقتطف للقيام بذلك:

 increment() => count.value++;

ستلاحظ أننا بحاجة إلى إضافة .value إلى متغير العد لزيادته. لقد فعلنا ذلك لأن إضافة .obs إلى متغير يجعله متغيرًا يمكن ملاحظته وللحصول على قيمة متغير يمكن ملاحظته ، يمكنك القيام بذلك من خاصية value .

لذلك انتهينا من وحدة التحكم. الآن عندما تتغير قيمة العد ، سيتم تحديث أي جزء من تطبيقنا يستخدمه تلقائيًا.

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

في views/my_home_page.dart ، قم باستيراد حزمة Get وأيضًا وحدة التحكم التي قمت بإنشائها على النحو التالي:

 import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart';

ثم داخل فئة MyHomePage ، سنقوم بإنشاء مثيل لـ MyHomePageController :

 final MyHomePageController controller = Get.put(MyHomePageController());

الآن لدينا مثيل لـ MyHomePageController ، يمكننا استخدام متغير الحالة وكذلك الطريقة. لذا بدءًا من الحالة ، في GetX لوضع علامة على جزء من واجهة المستخدم الخاصة بك ليتم إعادة بنائه عندما يتغير متغير الحالة ، ستلتف هذا الجزء باستخدام عنصر واجهة Obx . يوفر GetX طرقًا أخرى للقيام بذلك ، ولكن هذه الطريقة أبسط وأنظف بكثير.

بالنسبة لتطبيق العد الخاص بنا ، نريد تحديث عنصر واجهة النص بالعدد الحالي. لذلك سنقوم بلف أداة النص باستخدام عنصر واجهة Obx كما يلي:

 Obx(() => Text('0',style: Theme.of(context).textTheme.headline4,),)

بعد ذلك ، سنستبدل السلسلة الثابتة 0 بمتغير العد من MyHomePageController كما يلي:

 Obx(() => Text('${controller.count.value}', ,style: Theme.of(context).textTheme.headline4,),)

أخيرًا ، سنقوم باستدعاء طريقة الزيادة عند الضغط على floatingActionButton كما يلي:

 floatingActionButton: FloatingActionButton( onPressed: controller.increment, tooltip: 'Increment', child: Icon(Icons.add), ),

لذلك بشكل عام ، يجب أن يبدو ملف عرض MyHomePage بنا كما يلي:

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart'; class MyHomePage extends StatelessWidget { final String title; final MyHomePageController controller = Get.put(MyHomePageController()); MyHomePage({this.title}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'You have pushed the button this many times:', ), Obx( () => Text( '${controller.count.value}', style: Theme.of(context).textTheme.headline4, ), ) ], ), ), floatingActionButton: FloatingActionButton( onPressed: controller.increment, tooltip: 'Increment', child: Icon(Icons.add), ), ); } }

عند حفظ التطبيق الخاص بك أو إعادة تشغيله ، يجب أن يعمل تطبيق العداد كما كان يعمل عندما أنشأنا التطبيق لأول مرة.

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

التنقل في GetX

لقد رأينا إدارة الحالة في GetX. دعنا الآن نلقي نظرة على كيفية دعم GetX للتنقل داخل التطبيق الخاص بك. لتنشيط ميزة التنقل في GetX ، ما عليك سوى إجراء تغيير واحد في main.dart وهو تحويل أداة MaterialApp إلى أداة GetMaterialApp . لنفعل ذلك عن طريق استيراد Get in the top of main.dart

 import 'package:get/get.dart';

ثم نجري التغيير على MaterialApp بحيث يبدو ملف main.dart الآن كما يلي:

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import './views/my_home_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return GetMaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); } }

الآن تم إعداد تطبيقنا لدعم التنقل في GetX. لاختبار ذلك سننشئ عرضًا آخر في views/ الدليل. سوف نسمي هذا على about_page.dart وسيحتوي على الكود التالي:

 import 'package:flutter/material.dart'; import 'package:get/get.dart'; import '../controllers/my_home_page_controller.dart'; class AboutPage extends StatelessWidget { final MyHomePageController controller = Get.put(MyHomePageController()); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('About GetX'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Padding( padding: const EdgeInsets.all(16.0), child: Text( 'GetX is an extra-light and powerful solution for Flutter. It combines high performance state management, intelligent dependency injection, and route management in a quick and practical way.', ), ), ], ), ), ); } }

سننتقل بعد ذلك إلى MyHomePage ونضيف زرًا عند الضغط عليه سينتقل بنا إلى صفحة AboutPage . مثل ذلك. يجب أن يكون الزر أسفل أداة Obx. ها هو:

 FlatButton(onPressed: () {}, child: Text('About GetX'))

سنحتاج أيضًا إلى استيراد AboutPage أعلى ملف MyHomePage :

 import './about_page.dart';

لإخبار GetX بالانتقال إلى صفحة AboutPage ، كل ما نحتاجه هو سطر واحد من التعليمات البرمجية وهو:

 Get.to(AboutPage());

دعنا نضيف ذلك إلى رد الاتصال onPressed لعنصر واجهة مستخدم FlatButton كما يلي:

 FlatButton( onPressed: () { Get.to(AboutPage()); }, child: Text('About GetX'))

عندما تحفظ تطبيقك الآن ، ستتمكن الآن من الانتقال إلى AboutPage .

يمكنك أيضًا اختيار استبدال عرض MyHomePage بـ AboutPage بحيث لا يتمكن المستخدم من العودة إلى الصفحة السابقة عن طريق الضغط على زر رجوع الجهاز. هذا مفيد لشاشات مثل شاشات تسجيل الدخول. للقيام بذلك ، استبدل محتوى معالج onPressed أدناه:

 Get.off(AboutPage());

سيؤدي هذا إلى إظهار عرض MyHomePage واستبداله بـ AboutPage .

الآن بعد أن أصبح بإمكاننا الانتقال إلى AboutPage ، أعتقد أنه لن يكون من السيئ جدًا أن نتمكن من العودة إلى MyHomePage للقيام بذلك ، سنضيف زرًا في AboutPage بعد عنصر واجهة onPressed المعالج المضغوط سنقوم بإجراء مكالمة إلى Get.back() للعودة إلى MyHomePage :

 FlatButton( onPressed: () { Get.back(); }, child: Text('Go Home') )

مطعم الوجبات الخفيفة

في Flutter بشكل تقليدي لإظهار Snackbar ، ستحتاج إلى كتابة شيء مثل هذا:

 final snackBar = SnackBar(content: Text('Yay! A SnackBar!')); // Find the Scaffold in the widget tree and use it to show a SnackBar. Scaffold.of(context).showSnackBar(snackBar);

يمكنك ملاحظة أننا ما زلنا نعتمد على خاصية context . دعونا نرى كيف يمكننا تحقيق ذلك في GetX. انتقل إلى عرض MyHomePage وأضف عنصر واجهة مستخدم FlatButton آخر أسفل الزر الأخير الذي أضفناه. هذا هو مقتطف الزر:

 FlatButton( onPressed: () { // TODO: Implement Snackbar }, child: Text('Show Snackbar'))

دعنا نعرض الرسالة "رائع! رائع GetX Snackbar '. داخل وظيفة معالج onPressed ، أضف السطر التالي من الكود:

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar');

قم بتشغيل التطبيق الخاص بك وعندما تضغط على "إظهار زر Snackbar" سترى شريط وجبات خفيفة أعلى التطبيق الخاص بك!

شاهد كيف قللنا عدد الخطوط اللازمة لإظهار شريط الوجبات الخفيفة في تطبيق Flutter؟ لنقم بمزيد من التخصيص على Snackbar ؛ لنجعلها تظهر في الجزء السفلي من التطبيق. قم بتغيير الرمز إلى هذا:

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, );

احفظ وقم بتشغيل التطبيق الخاص بك وسيظهر Snackbar الآن في الجزء السفلي من التطبيق. ماذا عن تغيير لون خلفية Snackbar لأنه شفاف في الوقت الحالي. سنقوم بتغييره إلى لون amberAccent من فئة Colors في Flutter. قم بتحديث الكود إلى هذا:

 Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar',snackPosition:SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent );

بشكل عام ، يجب أن يبدو رمز الزر كما يلي:

 FlatButton( onPressed: () { Get.snackbar('GetX Snackbar', 'Yay! Awesome GetX Snackbar', snackPosition: SnackPosition.BOTTOM, backgroundColor: Colors.amberAccent); }, child: Text('Show Snackbar'))

حوار

يوفر GetX طريقة بسيطة لإنشاء AlertDialog في Flutter. دعونا نراه في العمل. قم بإنشاء زر آخر أسفل الزر السابق:

 FlatButton( onPressed: () { // TODO: Show alert dialog }, child: Text('Show AlertDialog'))

دعنا نستدعي GetX لعرض حوار تنبيه:

 Get.defaultDialog();

سيُظهر ذلك مربع حوار تنبيه افتراضي يمكن رفضه عن طريق النقر خارج مربع الحوار. يمكنك أن ترى كيف لدينا مربع حوار تنبيه عملي في سطر واحد من التعليمات البرمجية. دعونا نخصصها قليلاً. دعنا نغير العنوان والرسالة:

 Get.defaultDialog( title: 'GetX Alert', middleText: 'Simple GetX alert');

احفظ وقم بتشغيل التطبيق الخاص بك وسترى التغييرات عندما تضغط على زر "إظهار AlertDialog". يمكننا إضافة زري تأكيد وإلغاء مثل:

 Get.defaultDialog( title: 'GetX Alert', middleText: 'Simple GetX alert', textConfirm: 'Okay', confirmTextColor: Colors.amberAccent, textCancel: 'Cancel');

هناك العديد من الطرق لتخصيص مربع حوار GetX وواجهة برمجة التطبيقات بديهية وبسيطة تمامًا.

خاتمة

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

  • يمكنك العثور على العرض هنا →