إضافة Timer في Flutter مع تنفيذ امر معين بعد الانتهاء الوقت

في احد المشاريع التي كنت اعمل عليها طلب العميل مني مؤقت وبعد مرور وقت معين يتم تسجيل عملية تسجيل خروج من التطبيق ولهذا قمت بعمل وقت معين بمقدار 5 ثواني وبعد انتهاء المده يتم عمل emit ومن خلالها اقوم بعملية تسجيل الخروج وحذف البيانات التي يتم تخزينها , وايضا الtimer يوجد له مظهر معين وليس فقط القيام بتنفيذ عملية بعد انتهاء المده بل يتم الشكل يكون دائري وبداخله وقت وبعد الانتهاء يتم تنفيذ الوظيفه المطلوبة بدون مشاكل وهذا ما سوف نشاركه معكم في هذه المقاله .

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

how to add timer in flutter project

في هذا الجزء يتم تنفيذ الوظيفة المسؤوله عن تشغيل الtimer وهذا الكود يتم بداخل الcubit وهو عباره عن قيمة bool لتوضيح اذا كانت الوظيفه تعمل بشكل صحيح ام لا والمدة الزمنيه وtimer , startTimer كانت تقوم بتنفيذ العملية وتقوم بتقليل الوقت وايضا لديك ميثود اخرى وهيا stopTimer وتقوم بعمل اعادة تهيئة للوقت ,وايقاف الtimer كما هو موضح .

cubit.dart

 bool isStartTimer = false;
  int currentTimeMax = 30;
  int currentTimeMin = 5;
  Timer? timer;

  void startTimer() {
    isStartTimer = true;
    timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      if (currentTimeMin > 0) {
        currentTimeMin--;
        debugPrint('currentTimeMin $currentTimeMin');
        emit(ChangeCurrentTimeStart());
      } else {
        debugPrint('stop');
        signOut();
        emit(ChangeCurrentTimeEnd());
        stopTimer();
      }
    });
  }

  void stopTimer() {
    isStartTimer = false;
    timer?.cancel();
    currentTimeMin = 30;
    emit(ChangeCurrentTimeStop());
  }

اضافة تايمر في مشروعك وتنفيذ امر معين بعد انتهاء المده

بالنسبة للتصميم فهو يتم عن طريق القيمة الbool التي تتم من خلال الcubit وبناء على هذه القيمة يتم تنفيذ الشكل المعين سواء اظهار ايقونة switch لعمل timer ويتم من خلالها انتظار الوقت عند الانتهاء وتنفيذ العمليه او حتى اظهار الوقت المتبقى حتى يتم انتهاء الوقت وبعد الانتهاء يمكنك تسجيل الخروج او تنفيذ اي عملية ترغب بها بدون مشاكل .

ui.dart

                 child: ListTile(
                    leading: cubit.isStartTimer
                        ? SizedBox(
                            width: 40,
                            height: 40,
                            child: Stack(
                              fit: StackFit.expand,
                              children: [
                                CircularProgressIndicator(
                                  value: cubit.currentTimeMin /
                                      cubit.currentTimeMax,
                                  valueColor: AlwaysStoppedAnimation<Color>(
                                      HexColor(mainColor)),
                                  backgroundColor: HexColor(redColor),
                                  strokeWidth: 2,
                                ),
                                Center(child: BlocBuilder<MainBloc, MainState>(
                                  builder: (context, state) {
                                    return Text(
                                      '${cubit.currentTimeMin}',
                                      style: TextStyle(
                                        fontSize: 15,
                                        color: HexColor(mainColor),
                                      ),
                                    );
                                  },
                                ))
                              ],
                            ))
                        : const Icon(
                            Icons.timer,
                            size: 32,
                          ),
                    title: const Text('Timer to exit the application'),
                    trailing: CupertinoSwitch(
                      value: cubit.isStartTimer,
                      onChanged: (bool value) {
                        if (cubit.isStartTimer) {
                          cubit.stopTimer();
                        } else {
                          cubit.startTimer();
                        }
                      },
                    ),
                  )

فيديو الشرح

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

شارك المقالة

إضافة Timer في Flutter مع تنفيذ امر معين بعد الانتهاء الوقت