شرح استخدام FutureBuilder في Flutter

في هذا المقال سوف نشرح لكم كيف يمكنك استخدام FutureBuilder باسهل طريقة وكما نعلم ان flutter تسهل علينا اعادة بناء ال widget بكل سهوله , وفي هذا المقال سوف نشرح لكم خاصية FutureBuilder وهيا من الخواص التي عليك التعرف عليها واستخدامها في تطبيقك لتفادي كثير من المشاكل وايضا لكسب افضل اداء لتطبيقك بدون مشاكل وفي المقالات القادمه سوف نشرح لكم فكرة ال stream ايضا حتى تكون قادر على بناء تطبيقاتك بافضل صورة بدون اعطال .

تعتبر تطبيقات الهاتف المحمول حاسمة في هذه الظاهرة حيث تتوسع الرقمنة بسرعة. قد يجد المستهلكون حلولًا لكل ما يحتاجون إليه ، من الخدمات المصرفية عبر الهاتف المحمول إلى التسوق. تتطلب كل شركة تطبيقًا لخدماتها ، و iOS و Android هما النظامان الأساسيان اللذان يمكن للشركات عرض تطبيقاتها فيهما. تنفق الشركات الكثير من الأموال لتوظيف مطورين متخصصين لإنشاء تطبيقاتهم. والآن المعركة بين تطوير تطبيق React Native و Flutter على وشك أن تبدأ! كل علامة تجارية بحاجة ماسة إلى تطوير تطبيقات الهاتف المحمول. 6.64 مليار شخص ، أو 84 في المائة من سكان العالم ، سيستخدمون الهواتف المحمولة اعتبارًا من مارس 2022 ، وفقًا لتقرير. هذا يعني أن الأعمال التجارية لديها إمكانات غير محدودة. بالتالي،

How to use Future with bloc in Flutter

في هذا الجزء نقوم بالحصول على بيانات من الfirebase بداخل List ولهذا عليك بجعل ال methode عباره عن Future لان هذه البيانات سوف تاتي مستقبلا وليس في الوقت الحالي , فسوف تحتاج الى ان تنتظر الى ان يتم تحميل البيانات حتى يتم عرضها وهذا يكون شكل ال methode التي يمكنك استخدامها مع FutureBuilder ولا تنسى عمل return لل list .

cubit.dart

 Future<List<CheckOutModel>> getMyOrder() async {
    List<CheckOutModel> getMyOrderList = [];
    await FirebaseFirestore.instance
        .collection('check_out')
        .where('senderId', isEqualTo: uid)
        .get()
        .then((value) {
      if (value.docs.isNotEmpty) {
        for (var document in value.docs) {
          CheckOutModel myOrders = CheckOutModel.fromMap(document.data());
          getMyOrderList.add(myOrders);
        }
      } else {
        emit(GetMyOrderErrorState());
      }
    });
    emit(GetMyOrderSuccessState());
    return getMyOrderList;
  }

How to use FutureBuilder with ui in Flutter

الان ياتي دور استخدام FutureBuilder مع التصميم الخاص بك وهذا يكون من خلال ال body وتضع ال future ال methode المسؤوله عن عرض البينات والتي قمنا بتنفيذها في الاعلى , وبعدها بداخل ال build قمنا بعمل ConnectionState.waiting للتاكد ان البيانات في حالة العرض ولم تكتمل بعد وبعدها نقوم بعرض صورة بها عملية التحميل الى ان يتم التحميل وبعدها يتم العرض بشكل صحيح , وبعد الانتهاء من التحميل والانتظار يتم عرض التصميم الموجود في ال padding كما هو موضح بالصورة والكود التالي .

ui.dart

body: FutureBuilder<List<CheckOutModel>>(
          future: cubit.getMyOrder(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const LoadingPage();
            }
            return Padding(
              padding: designPadding,
              child: ListView.separated(
                physics: const BouncingScrollPhysics(),
                itemBuilder: (context, index) => space10Vertical,
                separatorBuilder: (context, index) => MyOrder(
                  model: snapshot.data![index],
                  onTap: () {
                    navigateTo(
                        context,
                        TimeLinePage(
                          model: snapshot.data![index],
                        ));
                  },
                ),
                itemCount: snapshot.data!.length,
              ),
            );
          }),