التعرف على اصدار التطبيق واظهار رسالة بتحديث التطبيق اذا توفرت نسخه احدث في Flutter

التعرف على اصدار التطبيق واظهار رسالة بتحديث التطبيق اذا توفرت نسخه احدث في Flutter

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

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

فوائد تطوير تخصيص التطبيقات المخصصة - الكفاءة - التحسين - النمو القابل للتطوير - المنظور الخارجي

add packages:

  flutter_app_version_checker: ^0.3.1

  url_launcher: ^6.1.6

How to Check Version app in flutter

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

main.dart

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await sl.init();
  Bloc.observer = MyBlocObserver();
  final state = await AppVersionChecker().checkUpdate();


  runApp(MyApp(
    isDark: isDark,
    isUpdate: state.canUpdate,
    urlApp: state.appURL!,
  ));
  
  class MyApp extends StatelessWidget {
  const MyApp({super.key,
    required this.isDark,
    required this.isUpdate,
    required this.urlApp,
  });
  final bool isDark;
  final bool isUpdate;
  final String urlApp;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
       home: isUpdate ? UpdatePage(urlApp: urlApp,) : const BankLayOutScreen(),
      );
   },
}

How to update app

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

update.dart

import 'package:bank/core/utils/appString.dart';
import 'package:bank/core/utils/constants.dart';
import 'package:bank/core/utils/extension.dart';
import 'package:bank/core/widgets/myElevatedButton.dart';
import 'package:bank/core/widgets/myText.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:lottie/lottie.dart';
import 'package:url_launcher/url_launcher.dart';
import '../bank_layout.dart';

class UpdatePage extends StatelessWidget {
  const UpdatePage({Key? key,
  required this.urlApp,
  }) : super(key: key);
  final String? urlApp;

  Future<void> _launchUrl() async {
    final Uri _url = Uri.parse(urlApp!);
    if (!await launchUrl(_url)) {
      throw 'Could not launch $_url';
    }
  }

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: const Text(AppString.update_info),
      ),
      body: Padding(
        padding: designApp,
        child: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Lottie.asset('assets/image/lottie/update_app.json',
              height: context.heightScreenWithOutBottom * 0.6,
              ),
              space20Vertical,
              const myText(title: AppString.update_abaliable,align: TextAlign.center,),
              space20Vertical,
              myElevatedButton(
                  onPressed: _launchUrl,
                  text: AppString.start_flexible_update),
              TextButton(onPressed: (){
                navigateAndFinish(context, const BankLayOutScreen());
              }, child: Text(AppString.skip_update , style: Theme.of(context).textTheme.displaySmall!.copyWith(
                fontSize: 12.sp,
              ),))
            ],
          ),
        ),
      ),
    );
  }

}