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

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

Flutter عبارة عن حزمة SDK أمامية لأنها تجمع بين عناصر واجهة المستخدم ومنطق الأعمال. على الرغم من أن العديد من الأشخاص يدعون أن Dart يُستخدم للواجهة الخلفية ، إلا أن الحقيقة هي أن Flutter هي واجهة أمامية بالكامل وأن Dart تستخدم فقط لمنطق الواجهة الأمامية. لكن تطوير التطبيقات الأصلية لنظامي التشغيل iOS و Android هو "ببساطة" الواجهة الأمامية.

Dart و Java و C / C ++ ولغات البرمجة الأخرى ليست سوى عدد قليل من تلك التي يمكن استخدامها لإنشاء تطبيقات الواجهة الأمامية والخلفية باستخدام Flutter ، وهو SDK عبر الأنظمة الأساسية.

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

How to use Stream with bloc in Flutter

في الكود التالي قمنا بعمل stream من نوع chectOut وهذا عباره عن model بحيث عندما يتم اصدار اي تحديث جديد يظهر في نفس الوقت على الشاشه دون الحاجه لتحديثها وهنا نستقبل البيانات من الفايربيز ونقوم بملئ ال model بها كما هو موضح بالكود .

cubit.dart

Stream<CheckOutModel> getTimeLineOrder({required String orderId}) {
    return FirebaseFirestore.instance
        .collection('check_out')
        .doc(orderId)
        .snapshots()
        .map((event) {
          
      CheckOutModel products = CheckOutModel();
      products = CheckOutModel.fromMap(event.data()!);

      return products;
    });
  }

How to use Stream with Ui in Flutter

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

ui.dart

StreamBuilder<CheckOutModel>(
          stream: cubit.getTimeLineOrder(orderId: widget.model.id!),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const LoadingPage();
            }
            return 
                Padding(
                  padding: designPadding,
                  child: Center(
                    child: Column(
                      children: [
                        buildIndicator(
                            isTrue: snapshot.data!.requestAccept!,
                            text: acceptText,
                            color: 'A1E3D8'),
                        buildIndicator(
                            isTrue: snapshot.data!.orderShipping!,
                            text: shoppingText,
                            color: yellowColor),
                        buildIndicator(
                            isTrue: snapshot.data!.receiptRequest!,
                            text: receiptText,
                            color: greenColor),
                      ],
                    ),
                    ),
    );
  }

Widget buildIndicator(
          {required bool isTrue,
          required String color,
          required String text}) =>
      Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Column(
            children: [
              Container(
                height: 100,
                width: 8,
                decoration: BoxDecoration(
                  color: HexColor(isTrue ? greenColor : secondColor),
                  borderRadius: BorderRadius.all(
                    Radius.circular(30),
                  ),
                ),
              ),
              space5Vertical,
              CircleAvatar(
                radius: 10,
                backgroundColor: HexColor(isTrue ? greenColor : secondColor),
              ),
              space5Vertical,
            ],
          ),
          if (isTrue) space10Horizontal,
          if (isTrue)
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Container(
                width: MediaQuery.of(context).size.width - 100,
                decoration: BoxDecoration(
                  color: HexColor(color).withOpacity(0.4),
                  borderRadius: BorderRadius.all(
                    Radius.circular(10),
                  ),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    text,
                    style: TextStyle(
                        color: HexColor(mainColor),
                        fontSize: MediaQuery.of(context).size.width * 0.035),
                  ),
                ),
              ),
            ),
        ],
      );

android sdk manager تحميل flutter developers applications create app android android studio mac

تعديل المقال

GeeCoders - جي كودرس

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