شرح كيفية التاكد من الاتصال بالانترنت وفي حالة عدم الاتصال اظهار صفحة عدم وجود انترنت flutter

شرح كيفية التاكد من الاتصال بالانترنت وفي حالة عدم الاتصال اظهار صفحة عدم وجود انترنت flutter


 شرح كيفية التاكد من الاتصال بالانترنت وفي حالة عدم الاتصال اظهار صفحة عدم وجود انترنت flutter

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


عندما نذكر flutter فإننا نذكر واحد من اقوى ال technology في مجال تطوير mobile application وذلك بسبب كفائتها التي نراها واهمية دعمها لاكثر من platform مختلفه وهذا من اهم اسباب انتشار تقنية flutter وايضا دعمها لتطوير websites و desktop applications والتحديثات المستمره من طرف العملاق google من اجل مساعدة ال developer من انشاء التطبيقات بسهوله وانجاز الاعمال بشكل اسرع وهي لغة widget فإذا فهمت كيف تستخدم ال widget بشكل صحيح والتعرف على كل عنصر منهم فسوف تكون قادر على بناء التطبيقات بسهوله بالنسبة للغة البرمجه الداعمه لفلاتر فهي Dart والتي ظهرت في عام 2011 وانتشرت في نهاية 2017 بسبب Flutter


مكتبة التاكد من عدم وجود انترنت

تحتاج الى تثبيت المكتبة التاليه لكي تستطيع متابعة الشرح بدون اي مشاكل ولكي لا تقابل مشاكل .


connectivity: ^3.0.6


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

في هذا الكود سوف نتاكد من حالة الاتصال ونتاكد من حالة الانترنت لكي نضمن ان المستخدم يستخدم انترنت بالفعل , ولهذا سوف نتاكد انه اذا كان الindex يساوي القيمة 2 وهيا التي تحوي الانترنت سوف نقوم بفتح التطبيق له واذا كانت القيمة تحتوي ال1 او 0 فلن نفتح له التطبيق ونجعل الnoInternetConnection بfalse وبعدها سوف نتاكد من حالة الانترنت اولا نتاكد هل يستعمل بيانات الهاتف ام لا وبعدها نتاكد هل يستعمل الwifi ام لا وبناء على الاجابه سوف نفتح له التطبيق ام لا .


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


cubit.dart


 // ------------------------------------ no internet

  bool noInternetConnection = false;

  void checkConnectivity() {
    Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
      debugPrint('Internet Connection ------------------------');
      debugPrint('${result.index}');
      debugPrint(result.toString());
      if (result.index == 0 || result.index == 1) {
        noInternetConnection = false;
      } else if (result.index == 2) {
        noInternetConnection = true;
      }

      emit(InternetState());
    });
  }

  void checkInternet() async {
    var connectivityResult = await (Connectivity().checkConnectivity());
    if (connectivityResult == ConnectivityResult.mobile) {
      noInternetConnection = false;
    } else if (connectivityResult == ConnectivityResult.wifi) {
      noInternetConnection = false;
    } else {
      noInternetConnection = true;
    }
    emit(InternetState());
  }
  


تصميم لصفحة عدم وجود انترنت

في هذا الكود سوف نقوم بعمل تصميم بسيط لصفحة الinternet وهي عباره عن صورة متحركة من نوع Lottie ونص يحتوي على عبارة No Internet Connection يمكنك عمل التصميم الذي ترغب به كما تريد .


تصميم لصفحة عدم وجود انترنت


no_internet.dart


class InternetConnectionPage extends StatelessWidget {
  const InternetConnectionPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Lottie.asset('assets/images/no_internet_2.json'),
            Text(
              'No Internet Connection',
              style: Theme.of(context).textTheme.headline6,
            ),
          ],
        ),
      ),
    );
  }
}



التاكد من حالة الانترنت وبناء على الاجابه الدخول للتطبيق او عرض صفحة عدم وجود انترنت

في هذا الكود سوف نقوم بعمل listener على هل يوجد انترنت ام لا اذا كانت الاجابة نعم سوف يفتح الصفحة التي نريدها واذا كانت لا سوف يفتح الصفحة التي تحتاج منه الى انترنت .


التاكد من حالة الانترنت وبناء على الاجابه الدخول للتطبيق او عرض صفحة عدم وجود انترنت


layout.dart


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

  @override
  State<ShopLayout> createState() => _ShopLayoutState();
}

class _ShopLayoutState extends State<ShopLayout> {
  final scaffoldKey = GlobalKey<ScaffoldState>();

  late PageController _pageController;

  @override
  void initState() {
    _pageController = PageController();
    super.initState();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

    @override
  Widget build(BuildContext context) {
    return BlocConsumer<ShopCubit, ShopStates>(
      listener: (context, state) {},
      builder: (context, state) {
        var cubit = ShopCubit.get(context);
        return BuildCondition(
          condition: !cubit.noInternetConnection,
			builder: (context)=> Directionality(...),
          		fallback: (context) =>  InternetConnectionPage(),
          
        );
      },
    );
  }
}


لمزيد من مقالات فلاتر يمكنك متابعة احد المقالات التاليه :


تعليقات