connectivity_watcher

Connectivity Watcher is a robust Flutter package designed to monitor internet connectivity and network availability status in real-time. This ensures that your app can effectively manage and respond to changes in connectivity, providing a seamless user experience.

Getting started

First, add connectivity_watcher as a dependency in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  connectivity_watcher: ^[version]

Import the package

import 'package:connectivity_watcher/connectivity_watcher.dart';

🚀 What's New

1. Renamed Classes

• ConnectivityWatcherWrapper is now ZoConnectivityWrapper.
• ConnectivityWatcher is now ZoConnectivityWatcher.

2. New NoConnectivity Styles

• CUSTOMALERT: Add your custom alert dialogs, and the package handles showing and hiding them.
• NONE: Manage widgets based on internet connectivity at the widget level instead of globally.

3. Curl Interceptor for Dio

Log API requests as curl commands in the console:

Dio dio = Dio();
dio.interceptors.add(CurlInterceptor());

4. ZoNetworkAware Widget

Handle network-aware functionality in your app. Example:

ZoNetworkAware(
  builder: (context, status) {
    if (status == ConnectivityWatcherStatus.connected) {
      return Container(
        height: 50,
        width: 250,
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(20),
        ),
        child: MaterialButton(
          onPressed: () async {},
          child: Text(
            'Login',
            style: TextStyle(color: Colors.black, fontSize: 25),
          ),
        ),
      );
    } else {
      return Container(
        height: 50,
        width: 250,
        decoration: BoxDecoration(
          color: Colors.blue,
          borderRadius: BorderRadius.circular(20),
        ),
        child: MaterialButton(
          onPressed: () async {},
          child: Text(
            'Disconnected',
            style: TextStyle(color: Colors.black, fontSize: 25),
          ),
        ),
      );
    }
  },
);

5. API Call with Internet Status

Execute API tasks seamlessly by verifying internet connectivity beforehand:

ZoConnectivityWatcher().makeApiCall(
  apiCall: (internetStatus) async {
    if (internetStatus) {
      Dio dio = Dio();
      Response data = await dio.post(
        "https://jsonplaceholder.typicode.com/posts",
        data: {
          "title": 'foo',
          "body": 'bar',
          "userId": 1,
        },
      );
    }
  },
);

Usage 🚀

Custom No Internet Screen

Wrap your MaterialApp with ConnectivityWatcherWrapper, set connectivityStyle to CUSTOM, and provide a custom widget:

Widget build(BuildContext context) {
  return ZoConnectivityWrapper(
    navigationKey: navigatorKey,
    connectivityStyle: NoConnectivityStyle.CUSTOM,
    noInternetText: Text(
      "Testing message",
      style: TextStyle(color: Colors.red),
    ),
    offlineWidget: CustomNoInternetWrapper(
      builder: (context) {
        return CustomNoInternet();
      },
    ),
    builder: (context, connectionKey) {
      return MaterialApp(
        navigatorKey: navigatorKey,
        debugShowCheckedModeBanner: false,
        title: 'Connectivity_Watcher',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: LoginDemo(),
      );
    },
  );
}

Note: The package will automatically remove the custom widget when the internet is back. If not, use the following method:

bool hasRemoved = await ZoConnectivityWatcher().hideNoInternet();
if (hasRemoved) {
  // Your code after internet is back
} else {
  print("No Internet");
}

Built-in Styles

SnackBar Style

Widget build(BuildContext context) {
  return ZoConnectivityWrapper(
    connectivityStyle: NoConnectivityStyle.SNACKBAR,
    builder: (context, connectionKey) {
      return MaterialApp(
        navigatorKey: connectionKey,
        debugShowCheckedModeBanner: false,
        title: 'Connectivity_Watcher',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: LoginDemo(),
      );
    },
  );
}

Alert Style

Widget build(BuildContext context) {
  return ZoConnectivityWrapper(
    connectivityStyle: NoConnectivityStyle.ALERT,
    builder: (context, connectionKey) {
      return MaterialApp(
        navigatorKey: connectionKey,
        debugShowCheckedModeBanner: false,
        title: 'Connectivity_Watcher',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: LoginDemo(),
      );
    },
  );
}

Preview

Custom

SnackBar

Alert

Check Internet Status

bool hasInternet = await ZoConnectivityWatcher().isInternetAvailable;

Features and Bugs

Feel free to post feature requests or report bugs here.