Flutter Network Status Checker :

In this blog, we’ll explore how to create a Flutter Network Status Checker. This simple application checks the current status of the internet connection and displays whether your device is connected or not. Using the internet_connection_checker package, this functionality can be built easily in Flutter.

Why Network Status Checker is Important

In modern mobile applications, checking for an active internet connection is crucial. Apps that rely on online data, such as social media platforms, streaming services, or shopping applications, need to know whether the user has an active connection. Implementing a network status checker ensures that the app behaves gracefully when offline and provides a better user experience.

Features of the App

•Live Internet Status: The app continuously checks if there’s an active internet connection.

•Real-time Updates: By pressing the refresh button, users can manually trigger a check to see if they are connected.

•Simple UI: The app’s user interface is clean and easy to use, displaying a text message that informs the user about the current internet connection status.

Packages Used

•internet_connection_checker: This package helps detect internet connectivity. It works by pinging a known external server, determining if your device is online or not.

Now, let’s dive into the code and break it down step by step.

Step-by-Step Explanation

1. Import Statements

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

These two import statements bring in the necessary libraries.

•flutter/material.dart: Contains all the Flutter widgets and components needed to build the UI.

•internet_connection_checker: This package is essential for checking internet connectivity.

2. Main Function

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

The main() function initializes the app by calling runApp(). The MyApp widget is passed to it, marking the start of the Flutter app.

3. MyApp Stateful Widget

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

The app is defined as a StatefulWidget because it will handle changing states, such as checking for internet status and updating the display in real-time. We use StatefulWidget when the app needs to be dynamic and change based on user interaction or external data.

4. State Initialization

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

The initState() method is called when the widget is inserted into the widget tree. Here, it’s used to automatically check the internet connection when the app starts.

5. Building the UI

@override
Widget build(BuildContext context) {
  return MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
      appBar: AppBar(
        title: const Text("Live Template"),
      ),
      body: Center(
        child: Text("Your internet status : $connectionStatus"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          checkActiveInternetConnection();
        },
        child: const Icon(Icons.refresh),
      ),
    ),
  );
}

This method defines the app’s UI:

•AppBar: Displays a title at the top of the app.

•Text Widget: Shows the current internet status (connectionStatus), which will be either “Connected to Internet” or “Not Connected.”

•FloatingActionButton: Allows users to manually refresh the internet status by pressing the button.

6. Checking Internet Connection

Future<void> checkActiveInternetConnection() async {
  bool hasConnection = await InternetConnectionChecker().hasConnection;
  String status = hasConnection ? "Connected to Internet" : "Not Connected";
  setState(() {
    connectionStatus = status;
  });
}

This function uses InternetConnectionChecker().hasConnection to check if there’s an active internet connection. The result (hasConnection) is either true or false. Based on this, the connectionStatus string is updated, and the setState() method refreshes the UI to show the current status.

Full Code :

main.dart

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  String connectionStatus = "Not Connected";

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Live Template"),
        ),
        body: Center(
          child: Text("You internet status : $connectionStatus")
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: (){
            checkActiveInternetConnection();
          },
          child: const Icon(Icons.refresh),
        ),
      ),
    );
  }

  Future<void> checkActiveInternetConnection() async {

    bool hasConnection = await InternetConnectionChecker().hasConnection;

    String status = hasConnection ?"Connected to Internet":"Not Connected";

    setState(() {
      connectionStatus = status;
    });
  }
}

Output :

If you like this tutorial, do share us for more interesting updates and if you have any queries just let us know in the comment section below.