التاكد من وجود انترنت ومعرفة نوع الاتصال سواء واي فاي ام بيانات الهاتف في فلاتر

التاكد من وجود انترنت ومعرفة نوع الاتصال سواء واي فاي ام بيانات الهاتف في فلاتر - Flutter Check internet


التاكد من وجود انترنت ومعرفة نوع الاتصال سواء واي فاي ام بيانات الهاتف في فلاتر - Flutter Check internet

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


كان Flutter موجودًا منذ أن أطلقته Google لأول مرة في عام 2015 ، لكن الإثارة المحيطة به أصبحت مؤخرًا أكبر. إنها أداة مشتركة بين الأنظمة الأساسية تستخدم بنية حديثة ومتفاعلة لإنشاء تطبيقات Android و iOS من قاعدة رمز واحدة. يتم استخدام Dart ، وهي لغة برمجة أساسية موجهة للكائنات ، لإنشاء تطبيقات Flutter. يتكون التصميم لدى Flutter من مجموعة قطع واشكال . تكون واجهة المستخدم الكاملة من العديد من عناصر واجهة المستخدم ، كل منها يحدد عنصرًا هيكليًا (مثل زر أو قائمة) ، وعنصر أسلوبي (مثل الخط أو نظام الألوان) ، وجانب التخطيط (مثل الحشو) ، و هكذا. لا تستخدم Flutter أدوات OEM ، وبدلاً من ذلك تقدم أدواتها الخاصة الجاهزة للاستخدام والتي يبدو أنها أصلية في Android (تصميم المواد) أو تطبيقات iOS.




تثبيت مكتبة connectivity_plus و internet_connection_checker

قم بتثبيت كلا المكتبتين في المكان المخصص لهم لديك .


connectivity_plus 

internet_connection_checker


dependencies:

  connectivity_plus: ^2.2.1

  internet_connection_checker: ^0.0.1+3


التاكد من اتصال الهاتف بالانترنت ومعرفة نوع الاتصال

في البداية نقوم بعمل StreamSubscription لكي نتابع سلوك التطبيق وبعدها نقوم بتنفيذ الامر المناسب وقمنا بعمل متغير يتغير بتغيير حالة التطبيق وبالنسبة لقيمة الresult سوف نحصل عليها عن طريق معرفة ماهي طريقة الاتصال هل من الواي فاي ام بيانات الهاتف ونخزن النتيجه في المتغير result وبعدها سوف نراقب هل الهاتف متصل بالانترنت ام لا وبناء عليه سوف نقوم بتغيير hasInternet وبداخل الdispose سوف نقوم باغلاق العملية وهذا اثناء قفل التطبيق وبعدها انتقلنا الى الbody وقمنا بتجربة التطبيق والاكواد اذا كان متصل عن طريق بيانات الهاتف سوف يعرض صورة واذا كان متصل عن طريق الانترنت سوف يعرض صورة اخرى واذا لم يكن متصل نهائيا سوف نعرض صورة مختلفه عن كلا الصورتين السابقتين .


التاكد من اتصال الهاتف بالانترنت ومعرفة نوع الاتصال

gee_coders.dart


class GeeCoders extends StatefulWidget {
  const GeeCoders({Key? key}) : super(key: key);

  @override
  State<GeeCoders> createState() => _GeeCodersState();
}

class _GeeCodersState extends State<GeeCoders> {
  late StreamSubscription streamSubscription;
  late StreamSubscription internetSubscription;
  // chek internet .
  bool hasInternet = false;
  // result of Connectivity
  ConnectivityResult result = ConnectivityResult.none;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    // network wifi or mobile data ?
    streamSubscription = Connectivity().onConnectivityChanged.listen((result) {
      setState(() {
        this.result = result;
      });
    });

    // listen to change Network.
    internetSubscription = InternetConnectionChecker().onStatusChange.listen((result) {
      // if event is connected change states
      final hasInternet = result == InternetConnectionStatus.connected;
      setState(() {
        this.hasInternet = hasInternet;
      });
    });
  }

  @override
  void dispose() {
    streamSubscription.cancel();
    internetSubscription.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // if Connectivity is mobile data
            if (result == ConnectivityResult.mobile)
              Image.asset(images[1]),
            // if Connectivity is wifi
            if (result == ConnectivityResult.wifi)
              Lottie.network('https://assets5.lottiefiles.com/packages/lf20_bbn97z7e.json'),
            // if is not Connectivity
            if (result == ConnectivityResult.none)
              Image.asset(images[0])
          ],
        ),
        )
    );
  }
}

واذا كنت تريد عمل stream للانترنت بحيث تعرف هل المستخدم يقوم بالعمل على الانترنت ام قام باغلاقه يمكنك مشاهدة الكود الخاص بالمشروع التالي وهو عباره عن تتبع للانترنت وحالته

github

مزيد من المقالات

تعليقات