How to Use connectivity_plus in Flutter for Network Status

Use the connectivity_plus package in Flutter to check the current network status and listen for changes. Import the package, create a Connectivity instance, then call checkConnectivity() for the current status and subscribe to onConnectivityChanged to react to updates.

Syntax

The connectivity_plus package provides a Connectivity class with key methods and streams:

• checkConnectivity(): Returns the current network status as ConnectivityResult.
• onConnectivityChanged: A stream that emits network status changes.

Use these to detect if the device is connected via Wi-Fi, mobile data, or offline.

dart

import 'package:connectivity_plus/connectivity_plus.dart';

final Connectivity connectivity = Connectivity();

// Check current status
ConnectivityResult result = await connectivity.checkConnectivity();

// Listen for changes
connectivity.onConnectivityChanged.listen((ConnectivityResult result) {
  // Handle change
});

Example

This example shows a Flutter app that displays the current network status and updates it live when connectivity changes.

dart

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

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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _connectionStatus = 'Unknown';
  final Connectivity _connectivity = Connectivity();
  late final StreamSubscription<ConnectivityResult> _connectivitySubscription;

  @override
  void initState() {
    super.initState();
    _initConnectivity();
    _connectivitySubscription = _connectivity.onConnectivityChanged.listen(_updateConnectionStatus);
  }

  @override
  void dispose() {
    _connectivitySubscription.cancel();
    super.dispose();
  }

  Future<void> _initConnectivity() async {
    ConnectivityResult result;
    try {
      result = await _connectivity.checkConnectivity();
    } catch (e) {
      result = ConnectivityResult.none;
    }
    _updateConnectionStatus(result);
  }

  void _updateConnectionStatus(ConnectivityResult result) {
    setState(() {
      switch (result) {
        case ConnectivityResult.wifi:
          _connectionStatus = 'Connected to Wi-Fi';
          break;
        case ConnectivityResult.mobile:
          _connectionStatus = 'Connected to Mobile Network';
          break;
        case ConnectivityResult.none:
          _connectionStatus = 'No Internet Connection';
          break;
        default:
          _connectionStatus = 'Unknown Connection Status';
          break;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Connectivity Plus Example')),
        body: Center(
          child: Text('Status: $_connectionStatus', style: TextStyle(fontSize: 20)),
        ),
      ),
    );
  }
}

Output

A Flutter app screen showing text like "Status: Connected to Wi-Fi" or "Status: No Internet Connection" that updates live when network changes.

Common Pitfalls

Common mistakes when using connectivity_plus include:

• Not handling the ConnectivityResult.none case, which means no internet.
• Assuming connectivity means internet access; sometimes Wi-Fi may not have internet.
• Forgetting to listen to onConnectivityChanged to update UI dynamically.
• Not adding connectivity_plus to pubspec.yaml dependencies.

dart

/* Wrong: Not listening to changes */
final Connectivity connectivity = Connectivity();

void checkStatus() async {
  ConnectivityResult result = await connectivity.checkConnectivity();
  print(result); // Only checks once
}

/* Right: Listen to changes */
connectivity.onConnectivityChanged.listen((ConnectivityResult result) {
  print('Connectivity changed to: $result');
});

Quick Reference

Summary tips for using connectivity_plus:

• Import with import 'package:connectivity_plus/connectivity_plus.dart';
• Use checkConnectivity() for current status.
• Subscribe to onConnectivityChanged for live updates.
• Handle all ConnectivityResult cases: wifi, mobile, none.
• Remember connectivity does not guarantee internet access.

Key Takeaways

Use connectivity_plus to check and listen for network status changes in Flutter.

Always handle the 'none' connectivity case to detect no internet.

Subscribe to onConnectivityChanged stream to update UI dynamically.

Connectivity status shows network type but not guaranteed internet access.

Add connectivity_plus to pubspec.yaml and import it before use.