Kali Code's Blog
How To Detect Network Connectivity in Flutter

Photo by Josh Withers on Unsplash

How To Detect Network Connectivity in Flutter

Salimonu Ayodele's photo
Salimonu Ayodele
·

3 min read

To Listen to changes once

To detect network connectivity in Flutter, you can use the Connectivity package. This package provides a way to check the current network connectivity status and listen for changes in connectivity.

Here's an example code snippet that shows how to use the Connectivity package to detect network connectivity:

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  var _connectivityStatus = 'Unknown';

  @override
  void initState() {
    super.initState();
    _initConnectivity();
    Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
      setState(() {
        _connectivityStatus = result.toString();
      });
    });
  }

  Future<void> _initConnectivity() async {
    var connectivityResult = await Connectivity().checkConnectivity();
    setState(() {
      _connectivityStatus = connectivityResult.toString();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text('Connectivity Status: $_connectivityStatus'),
      ),
    );
  }
}

In this example, the _connectivityStatus variable is used to store the current network connectivity status, which is initially set to "Unknown". In the initState method, the _initConnectivity method is called to check the current connectivity status and update the _connectivityStatus variable accordingly. Then, a listener is added to the onConnectivityChanged stream to listen for changes in connectivity and update the _connectivityStatus variable when the network status changes.

Finally, the build method displays the current connectivity status in the center of the screen.

You can use the Connectivity package to handle network connectivity in your Flutter app and provide a better user experience for users who may be experiencing connectivity issues.

For Continuously listening

To continuously check network connectivity in Flutter, you can use the StreamBuilder widget along with the Connectivity package. This allows you to listen for changes in network connectivity and update your UI accordingly.

Here's an example code snippet that shows how to use the StreamBuilder widget to continuously check network connectivity:

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network Connectivity'),
      ),
      body: StreamBuilder<ConnectivityResult>(
        stream: Connectivity().onConnectivityChanged,
        builder: (BuildContext context, AsyncSnapshot<ConnectivityResult> snapshot) {
          if (!snapshot.hasData) {
            return Center(child: CircularProgressIndicator());
          }
          var connectivityStatus = snapshot.data.toString();
          return Center(
            child: Text('Connectivity Status: $connectivityStatus'),
          );
        },
      ),
    );
  }
}

In this example, the StreamBuilder widget is used to listen for changes in network connectivity status. The stream property is set to Connectivity().onConnectivityChanged, which is a stream that emits ConnectivityResult objects whenever the network connectivity status changes.

In the builder callback, we check if the snapshot has data and if it doesn't, we display a CircularProgressIndicator widget to indicate that we are still waiting for data. Otherwise, we get the current connectivity status from the snapshot data and display it in the center of the screen.

This code continuously updates the connectivity status as the network connection changes. You can use this code as a starting point to build more advanced network connectivity handling in your Flutter app.

Flutter