How to Show Automatic Internet Connection Offline Message in Flutter

In today’s world, the internet has become an essential part of our lives. It is necessary for almost every task we do, from social media browsing to online shopping. Hence, it is important to show a proper message to the user when the device is not connected to the internet. In this tutorial, I will show you how to implement an automatic internet connection offline message in Flutter using Dart.

Here is what you need:

• A basic understanding of Dart and Flutter.
• Visual Studio Code (VSCode) or any other code editor of your choice.

To begin, create a new Flutter project using the following command in the terminal:

flutter create project_name

Once the project is created, open it in VSCode or your preferred code editor.

Here’s the pubspec.yaml file with the necessary dependencies:

import 'package:flutter/material.dart';
import 'home_page.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Drawer with Menu Icon',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

This file tells the pub package manager to download the connectivity package version 0.4.9 or higher. The ^ symbol in front of the version number means that the package manager will automatically download the latest version that’s compatible with version 0.4.9.

Next, we will create a custom widget to show the internet connection offline message. Create a new Dart file in the “lib” folder and name it “offline_message.dart”.

import 'package:flutter/material.dart';

class OfflineMessage extends StatelessWidget {
  const OfflineMessage({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Center(
        child: Text(
          "You are offline!",
          style: TextStyle(
            color: Colors.white,
            fontSize: 18,
          ),
        ),
      ),
    );
  }
}

This widget is a simple container with a red background color and a white text that says “You are offline!”.

Next, we will create a custom wrapper class that will check the internet connection and show the offline message when needed. Create a new Dart file in the “lib” folder and name it “connectivity_wrapper.dart”.

import 'package:connectivity/connectivity.dart';
import 'package:flutter/material.dart';
import 'offline_message.dart';

class ConnectivityWrapper extends StatefulWidget {
  final Widget child;

  ConnectivityWrapper({@required this.child});

  @override
  _ConnectivityWrapperState createState() => _ConnectivityWrapperState();
}

class _ConnectivityWrapperState extends State<ConnectivityWrapper> {
  var _connectionStatus = 'Unknown';

  @override
  void initState() {
    super.initState();
    _checkInternetConnection();
  }

  _checkInternetConnection() async {
    var connectivityResult = await (Connectivity().checkConnectivity());
    if (connectivityResult == ConnectivityResult.none) {
      setState(() {
        _connectionStatus = 'Offline';
      });
    } else {
      setState(() {
        _connectionStatus = 'Online';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    if (_connectionStatus == 'Offline') {
      return OfflineMessage();
    } else {
      return widget.child;
    }
  }
}


This class extends the “StatefulWidget” class and has a single child widget that it wraps. The “initState

The “ConnectivityWrapper” class checks the internet connection status using the “Connectivity” package and shows the “OfflineMessage” widget if the device is offline.

Now, to use this custom wrapper, you need to wrap your root widget in the “ConnectivityWrapper”. Open the “main.dart” file and replace its contents with the following code:

import 'package:flutter/material.dart';
import 'connectivity_wrapper.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ConnectivityWrapper(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Offline Message"),
      ),
      body: Center(
        child: Text("Welcome to Flutter!"),
      ),
    );
  }
}


In this example, the root widget is “MyApp”, which is wrapped inside the “ConnectivityWrapper”. The “MyHomePage” widget is the child of the “ConnectivityWrapper”.

That’s it! You can now run your project and test the offline message. If your device is not connected to the internet, you will see the “You are offline!” message.

I hope this tutorial has helped you implement an automatic internet connection offline message in Flutter using Dart. If you have any questions, please leave a comment below.

Here is the complete code for reference:

Sure! Here’s the complete code for reference:

import 'package:flutter/material.dart';

class OfflineMessage extends StatelessWidget {
  const OfflineMessage({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: Center(
        child: Text(
          "You are offline!",
          style: TextStyle(
            color: Colors.white,
            fontSize: 18,
          ),
        ),
      ),
    );
  }
}

// connectivity_wrapper.dart
import 'package:connectivity/connectivity.dart';
import 'package:flutter/material.dart';
import 'offline_message.dart';

class ConnectivityWrapper extends StatefulWidget {
  final Widget child;

  ConnectivityWrapper({@required this.child});

  @override
  _ConnectivityWrapperState createState() => _ConnectivityWrapperState();
}

class _ConnectivityWrapperState extends State<ConnectivityWrapper> {
  var _connectionStatus = 'Unknown';

  @override
  void initState() {
    super.initState();
    _checkInternetConnection();
  }

  _checkInternetConnection() async {
    var connectivityResult = await (Connectivity().checkConnectivity());
    if (connectivityResult == ConnectivityResult.mobile) {
      setState(() {
        _connectionStatus = 'Mobile';
      });
    } else if (connectivityResult == ConnectivityResult.wifi) {
      setState(() {
        _connectionStatus = 'Wi-Fi';
      });
    } else {
      setState(() {
        _connectionStatus = 'Offline';
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return _connectionStatus == 'Offline'
        ? OfflineMessage()
        : widget.child;
  }
}

// main.dart
import 'package:flutter/material.dart';
import 'connectivity_wrapper.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ConnectivityWrapper(
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Flutter Offline Message"),
      ),
      body: Center(
        child: Text("Welcome to Flutter!"),
      ),
    );
  }
}