How to check Internet status and show message in flutter?

The Internet is the basic need for any App to work. When a user opens an App, it is better practice to find if the internet is active or not and inform the user if there is no internet connection. There are many ways the user can be notified which changes from App to App. Below are few ways which can be used,

• Through a simple push notification.
• Through an alert or a dialog.
• Through an independent page with some custom good looking design.

Additionally, the App should be able to resume if the change in network connection state starts working.

You have to use the ‘Connectivity Flutter Package’ to achieve this feature on your App. This package helps to know either your device is online or offline. You have to subscribe StreamSubscription returned by this package to show the internet connection message automatically like below.

Step 1: Add the connectivity plus plugin inside the pubspec.yamlfile

Now, see the example below, and apply exactly same method to show internet connection offline message automatically in your app layout.

full-code example:

import 'dart:async';
import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class CheckConnection extends StatefulWidget{
  @override
  State createState() {
    return _CheckConnection();
  }
}

class _CheckConnection extends State{
  StreamSubscription? internetconnection;
  bool isoffline = false;
  //set variable for Connectivity subscription listiner
  
  @override
  void initState() {
    internetconnection = Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
        // whenevery connection status is changed.
        if(result == ConnectivityResult.none){
             //there is no any connection
             setState(() {
                 isoffline = true;
             }); 
        }else if(result == ConnectivityResult.mobile){
             //connection is mobile data network
             setState(() {
                isoffline = false;
             });
        }else if(result == ConnectivityResult.wifi){
            //connection is from wifi
            setState(() {
               isoffline = false;
            });
        }
    }); // using this listiner, you can get the medium of connection as well.

    super.initState();
  }

  @override
  dispose() {
    super.dispose();
    internetconnection!.cancel();
    //cancel internent connection subscription after you are done
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title:Text("Flutterfever Connection")),
        body:SingleChildScrollView( 
             child: Column(children: [
                  
                  Container( 
                     child: errmsg("No Internet Connection Available", isoffline),
                     //to show internet connection message on isoffline = true.
                  ),

                  Container( 
                     //this is your content
                      margin: EdgeInsets.all(30),
                      width:double.infinity,
                      child: Center( 
                         child:Text("Check Connections for flutterfever.com",
                            style:TextStyle(fontSize:20)
                         )
                      )
                  )

             ],)
        )
    );
  }

  Widget errmsg(String text,bool show){
  //error message widget.
      if(show == true){
        //if error is true then show error message box
        return Container(
            padding: EdgeInsets.all(10.00),
            margin: EdgeInsets.only(bottom: 10.00),
            color: Colors.red,
            child: Row(children: [

                Container(
                    margin: EdgeInsets.only(right:6.00),
                    child: Icon(Icons.info, color: Colors.white),
                ), // icon for error message
                
                Text(text, style: TextStyle(color: Colors.white)),
                //show error message text
            ]),
        );
      }else{
         return Container();
         //if error is false, return empty container.
      }
  }
}