The connectivity_plus package is a popular tool in Flutter for monitoring network connectivity status across platforms like Android and iOS. This post will provide an SEO-optimized guide to help you rank on Google, along with a complete Flutter code example using GetX for controller binding and view with a beautified UI.

Table of Contents:

  • What is connectivity_plus?
  • Why Use connectivity_plus in Flutter?
  • Features of connectivity_plus
  • Installing connectivity_plus in Your Flutter Project
  • Full Code Example: Controller Binding and View
  • Beautified UI for Network Status
  • Conclusion

What is connectivity_plus?

The connectivity_plus package allows developers to check the network status of a device in Flutter. It detects whether the user is connected to the internet via WiFi, mobile data, or offline.

Why Use connectivity_plus in Flutter?

In many applications, internet connectivity plays a critical role. Whether you are building an e-commerce app or a social media app, knowing the device's network status is important for managing online/offline operations and providing a smooth user experience.

Key benefits include:

  • Monitoring real-time connectivity changes.
  • Notifying users about network disconnection.
  • Helping apps adapt to connectivity conditions like switching between WiFi and mobile data.

Features of connectivity_plus

  • Cross-platform: Supports both Android and iOS.
  • Event-driven: Listens for changes in connectivity status.
  • Easy integration: Comes with a simple API for checking and listening to connectivity.

Installing connectivity_plus in Your Flutter Project

To use connectivity_plus, first, add the package to your pubspec.yaml file:

 dependencies:
  flutter:
    sdk: flutter
  connectivity_plus: ^4.0.3  # Use the latest version
Then, run:
flutter pub get

Full Code Example: Controller Binding and View

In this example, we will use GetX for state management and controller binding to manage network connectivity.

Step 1: Setting up the GetX Controller

Create a file connectivity_controller.dart and define a GetX controller to handle connectivity status:

 import 'package:connectivity_plus/connectivity_plus.dart';
 import 'package:get/get.dart';

 class ConnectivityController extends GetxController {
   var connectionStatus = 0.obs; // 0 - Unknown, 1 - WiFi, 2 - Mobile, 3 - Offline

   final Connectivity _connectivity = Connectivity();

   @override
   void onInit() {
    super.onInit();
    _checkConnection();
    _connectivity.onConnectivityChanged.listen(_updateConnectionStatus);
   }

   Future _checkConnection() async {
    var connectivityResult = await _connectivity.checkConnectivity();
    _updateConnectionStatus(connectivityResult);
   }

   void _updateConnectionStatus(ConnectivityResult result) {
     switch (result) {
       case ConnectivityResult.wifi:
         connectionStatus.value = 1;
         break;
       case ConnectivityResult.mobile:
         connectionStatus.value = 2;
         break;
       case ConnectivityResult.none:
         connectionStatus.value = 3;
         break;
       default:
         connectionStatus.value = 0;
         break;
     }
   }
 }

Step 2: Creating the UI

Now, create the UI to display the connectivity status in main.dart.

 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'connectivity_controller.dart';

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

 class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Connectivity Plus Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
       ),
       home: HomeScreen(),
     );
   }
 }

 class HomeScreen extends StatelessWidget {
  final ConnectivityController controller = Get.put(ConnectivityController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Network Status'),
      ),
      body: Center(
        child: Obx(() {
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                _getConnectionIcon(controller.connectionStatus.value),
                size: 100,
                color: _getConnectionColor(controller.connectionStatus.value),
              ),
              SizedBox(height: 20),
              Text(
                _getConnectionText(controller.connectionStatus.value),
                style: TextStyle(fontSize: 24),
              ),
            ],
          );
        }),
      ),
    );
  }

  IconData _getConnectionIcon(int status) {
    switch (status) {
      case 1:
        return Icons.wifi;
      case 2:
        return Icons.signal_cellular_alt;
      case 3:
        return Icons.signal_wifi_off;
      default:
        return Icons.help_outline;
    }
  }

  Color _getConnectionColor(int status) {
    switch (status) {
      case 1:
        return Colors.green;
      case 2:
        return Colors.orange;
      case 3:
        return Colors.red;
      default:
        return Colors.grey;
    }
  }

  String _getConnectionText(int status) {
    switch (status) {
      case 1:
        return "Connected to WiFi";
      case 2:
        return "Using Mobile Data";
      case 3:
        return "No Internet Connection";
      default:
        return "Unknown Network Status";
     }
   }
 }

Beautified UI for Network Status

In the above UI:

  • Icons: Represent different connection states such as WiFi, mobile data, or no connection.
  • Colors: Different colors (green, orange, red) are used to highlight the current network status.
  • Dynamic Text: Text changes dynamically based on the connection status.

You can further enhance this UI by adding animations or better design elements such as custom fonts, shadow effects, or background gradients.

Conclusion

Using connectivity_plus in your Flutter application allows you to monitor network connectivity easily and efficiently. With the GetX package for state management, the implementation becomes seamless. By following this guide, you can quickly integrate connectivity monitoring into your app and provide users with real-time feedback on their network status.