How to Show Automatic Internet Connection Offline Message in Flutter

April 9, 2024

To implement this feature in your app, utilize the 'Connectivity Flutter Package' This package enables you to determine whether your device is currently online or offline. You'll need to subscribe to the StreamSubscription returned by this package. By doing so, you can automatically display messages regarding internet connectivity status, ensuring a seamless user experience.

First add connectivity_plus Flutter Package in your pubspec.yaml

Copy

dependencies:
  flutter:
    sdk: flutter
  connectivity_plus: ^6.0.3

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

Copy

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 listener

  @override
  void initState() {
    internetConnection =
        Connectivity().onConnectivityChanged.listen((connectivityResult) {
      if (connectivityResult.contains(ConnectivityResult.none)) {
        //there is no any connection
        setState(() {
          isOffline = true;
        });
      } else if (connectivityResult.contains(ConnectivityResult.mobile) ||
          connectivityResult.contains(ConnectivityResult.wifi)) {
        //connection is from Wifi or Mobile
        setState(() {
          isOffline = false;
        });
      }
    });
    super.initState();
  }

  @override
  dispose() {
    super.dispose();
    internetConnection?.cancel();
    //cancel internet connection subscription after you are done
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Check Connection",
        ),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Container(
              child: errorMessage(
                "No Internet Connection Available",
                isOffline,
              ),
              //to show internet connection message on isOffline = true.
            ),
            Container(
              margin: const EdgeInsets.all(
                30,
              ),
              width: double.infinity,
              child: const Center(
                child: Text(
                  "Check Connections",
                  style: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget errorMessage(
    String text,
    bool show,
  ) {
    //error message widget.
    if (show == true) {
      //if error is true then show error message box
      return Container(
        padding: const EdgeInsets.all(
          10.00,
        ),
        margin: const EdgeInsets.only(
          bottom: 10.00,
        ),
        color: Colors.red,
        child: Row(children: [
          Container(
            margin: const EdgeInsets.only(
              right: 6.00,
            ),
            child: const Icon(
              Icons.info,
              color: Colors.white,
            ),
          ), // icon for error message

          Text(
            text,
            style: const TextStyle(
              color: Colors.white,
            ),
          ),
          //show error message text
        ]),
      );
    } else {
      //if error is false, return empty container.
      return Container();
    }
  }
}

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

Tags: