How to write a code Internet Connectivity in Flutter

Check Internet Connectivity In Flutter

In pubspec.yaml file:  add package,

connectivity_plus: ^3.0.3 

provider: ^6.0.3

In Dart file: Write a Code,

1- Create  AppScaffold.dart file,

import 'package:flutter/material.dart';
import 'package:../widgets/network_widget.dart';
import 'network_aware_widget.dart';


class AppScaffold extends StatelessWidget {
  final Widget child;

  const AppScaffold({Key? key, required this.child}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NetworkAwareWidget(
          onlineChild: child,
          offlineChild:  Center(
            child: OfflineWidget() //(according to need create offline Network UI)
          )),
    );
  }
}

2- Create an OfflineWidget.dart file,

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:.../routes/const_string_route_name.dart';
import 'package:.../styles/Style.dart';
import 'package:.../styles/colors.dart';
import 'package:.../styles/fontSize.dart';
import 'package:sizer/sizer.dart';

class OfflineWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    fontSizes(context);
    return Scaffold(
      body:  Center(
      child: Container(
        decoration: containerDecoration,
        height: MediaQuery.of(context).size.height,
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Center(
                  child: Image(
                    height: 20.h,
                    image: AssetImage('assets/images/connection.png'),
                  ),
                ),
                Center(
                  child: Image(
                    height: 20.h,
                    image: AssetImage('assets/images/network.png'),
                  ),
                ),
                Center(
                  child: Text(
                    "Something Went wrong .",
                    style: GoogleFonts.raleway(
                      fontWeight: FontWeight.w600,
                      fontSize: fontSizes.subtitle,
                      height: 1.2,
                      letterSpacing: .5,
                      color: redColor,
                    ),
                  ),
                ),
                Center(
                  child: Text(
                    "No Internet Connection.",
                    style: GoogleFonts.raleway(
                      fontWeight: FontWeight.w600,
                      fontSize: fontSizes.subtitle,
                      height: 1.2,
                      letterSpacing: .5,
                      color: redColor,
                    ),
                  ),
                ),
                Center(
                  child: Text(
                    "Your are Offline.",
                    style: GoogleFonts.raleway(
                      fontWeight: FontWeight.w600,
                      fontSize: fontSizes.subtitle,
                      height: 1.2,
                      letterSpacing: .5,
                      color: blackColor,
                    ),
                  ),
                ),
                SizedBox(
                  height: 2.h,
                ),
                InkWell(
                  onTap: () {
                    Navigator.pushNamedAndRemoveUntil(
                        context, splashRoute, (route) => false);
                  },
                  child: Container(
                    height: 5.h,
                    width: MediaQuery.of(context).size.width * 0.6,
                    decoration: containerDecoration1,
                    child: Center(
                      child: Text(
                        "Try Again",
                        style: GoogleFonts.raleway(
                          fontWeight: FontWeight.w600,
                          fontSize: fontSizes.subtitle,
                          height: 1.2,
                          letterSpacing: .5,
                          color: kBackgroundColor,
                        ),
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    )
  
    );
    
  }
}

3- Create a NetworkAwareWidget.dart file ,

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'network_status_service.dart';

class NetworkAwareWidget extends StatelessWidget {
  final Widget onlineChild;
  final Widget offlineChild;

  const NetworkAwareWidget(
      {Key? key, required this.onlineChild, required this.offlineChild})
      : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Consumer<NetworkStatus>(builder: (context, data, child) {
      return data == NetworkStatus.Online ? onlineChild : offlineChild;
    });
  }
}

4- Create a NetworkStatusService.dart file,

import 'dart:async';
import 'package:connectivity_plus/connectivity_plus.dart';

enum NetworkStatus { Online, Offline }

class NetworkStatusService {

  StreamController<NetworkStatus> networkStatusController =
      StreamController<NetworkStatus>();


  NetworkStatusService() {
    Connectivity().onConnectivityChanged.listen((status) {
      networkStatusController.add(_getNetworkStatus(status));
    });
  }

  NetworkStatus _getNetworkStatus(ConnectivityResult status) {
    return status == ConnectivityResult.mobile ||
            status == ConnectivityResult.wifi
        ? NetworkStatus.Online
        : NetworkStatus.Offline;
  }


}

Finally, use this Network Check Status Widgets in the Requirement file

Like this,

MultiProvider(
    providers: [
  StreamProvider<NetworkStatus>(
    create: (context) =>
        NetworkStatusService().networkStatusController.stream,
    initialData: NetworkStatus.Online,
  )
], child: const AppScaffold(child: LoginScreen())
)

Thanks for reading the article ...