Posted in Dart Flutter

Flutter – Automatically Show Internet Connection Message on Offline or Online

Flutter – Automatically Show Internet Connection Message on Offline or Online Posted on May 13, 20202 Comments
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

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.

automatic internet connection message

First add Connectivity Flutter Package in your pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  connectivity: ^0.4.8+6

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/connectivity.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class _CheckConnection extends State<CheckConnection>{
  StreamSubscription<ConnectivityResult> 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: <Widget>[
                  
                  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: <Widget>[

                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 internet connection message automatically on your app layout.

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

2 comments

Leave a Reply

Your email address will not be published. Required fields are marked *