How to Show Automatic Internet Connection Offline Message in Flutter

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.

First add Connectivity_plus Flutter Package in your pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  connectivity_plus: ^2.2.1

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

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("Check 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",
                            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.
      }
  }
}

In this way, you can show the internet connection message automatically on your app layout.