connectivity_watcher

A lightning-fast Flutter plugin for true internet connectivity monitoring. Most connectivity packages only check if the device's Wi-Fi or Mobile radio is "on." ZoConnectivityWatcher goes further by implementing a real-time Heartbeat Strategy (inspired by high-performance games like Clash of Clans and PUBG). It ensures your app knows when the internet is actually reachable, detecting "Liar Wi-Fi" (connected to a router but no data flow) in sub-second time.

🧑‍💻 Getting Started

1. Install the package

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

2. Import it

import 'package:connectivity_watcher/connectivity_watcher.dart';

3. Initialize it in main.dart

Basic Setup

Initialize the watcher in your main.dart. By default, it uses DNS socket checks (Google/Cloudflare) to verify connectivity.

WidgetsFlutterBinding.ensureInitialized();
ZoConnectivityWatcher().setUp();

Advanced: Custom Heartbeat & Timing

If you want to use your own website as the source of truth (highly recommended to bypass DNS blocks), pass a StealthInternetChecker instance to the setUp method.

ZoConnectivityWatcher().setUp(
  internetChecker: StealthInternetChecker(
    heartbeatUrl: "https://your-website.com", 
    checkInterval: Duration(seconds: 10),    
    timeout: Duration(seconds: 5),           
  ),
);

🔌 Basic Usage

Custom UI	SnackBar Style	Alert Dialog

Wrap Your App

Use ZoConnectivityWrapper at the root of your app to monitor connection changes:

ZoConnectivityWrapper(
  connectivityStyle: NoConnectivityStyle.SNACKBAR,
  builder: (context, connectionKey) {
    return MaterialApp(
      navigatorKey: connectionKey,
      home: LoginDemo(),
    );
  },
);

Use Prebuilt UI Styles

Snackbar Style

connectivityStyle: NoConnectivityStyle.SNACKBAR,

Alert Dialog Style

connectivityStyle: NoConnectivityStyle.ALERT,

Want to show your own offline UI? Use NoConnectivityStyle.CUSTOM:

ZoConnectivityWrapper(
  connectivityStyle: NoConnectivityStyle.CUSTOM,
  offlineWidget: CustomNoInternetWrapper(
    builder: (context) => CustomNoInternet(),
  ),
  builder: (context, connectionKey) => MaterialApp(
    navigatorKey: connectionKey,
    home: LoginDemo(),
  ),
);

The widget is auto-removed once the internet is back. You can also remove it manually:

bool removed = await ZoConnectivityWatcher().hideNoInternet();
if (!removed) {
  print("Still no internet");
}

🔁 API Call with Retry

Automatically retries failed API calls after connectivity is restored:

ZoConnectivityWatcher().makeApiCallWithRetry(
  maxRetries: 2,
  delay: const Duration(seconds: 1),
  apiCall: () async {
    final dio = Dio();
    dio.interceptors.add(CurlInterceptor());

    final response = await dio.post(
      "https://jsonplaceholder.typicode.com/posts",
      data: {
        "title": 'foo',
        "body": 'bar',
        "userId": 1,
      },
    );
  },
);

🌐 Check Internet Manually

bool hasInternet = await ZoConnectivityWatcher().isInternetAvailable;

🧠 Network-Aware Widgets

Use ZoNetworkAwareWidget to render UI based on real-time connectivity:

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

🧪 Curl Logging for Dio

Log API requests as curl commands in your console:

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

🔎 In-App Network Inspector (Beta)

Monitor all HTTP traffic directly inside your app, similar to the Chrome Network Tab. You can view status codes, request/response bodies, headers, and easily copy cURL commands.

1. Attach the Logger

Add the NetworkLoggerInterceptor to your Dio client to start tracking:

final dio = Dio();
ZoConnectivityWatcher().setupDioLogger(dio);

2. Open the Inspector

Open the UI from anywhere in your app to view the logs:

ZoConnectivityWatcher().showNetworkLogsScreen(context);

3. Manage Logs Programmatically

You can also access or clear the logs in code:

// Get all logs
final logs = ZoConnectivityWatcher().getNetworkLogs();

// Clear logs
ZoNetworkLogManager.instance.clearLogs();

Ping System

Measure the exact round-trip latency to a server in real-time and display it in your app, similar to AAA gaming titles (e.g., PUBG, Valorant). It uses a lightweight background TCP socket connection to measure latency without blocking the UI.

1. Initialize the Ping Service

Start the service in your initialization block. You can ping your own API or game server, or leave it blank to default to Google DNS (8.8.8.8).

// Defaults to pinging 8.8.8.8 every 2 seconds
ZoConnectivityWatcher().initPingService();

// Or measure latency to your own server:
ZoConnectivityWatcher().initPingService(
  targetIp: '192.168.1.1',
  interval: const Duration(seconds: 1),
);

Add the ZoPingWidget anywhere in your UI. It will automatically update and color-code the ping in milliseconds (Green for <100ms, Orange for <200ms, Red for >200ms).

AppBar(
  actions: [
    ZoPingWidget(
      goodPingThreshold: 100,
      mediumPingThreshold: 200,
    
  ],
)

🛠️ Feature Requests & Bugs

Have an idea or found a bug? Open an issue on GitHub.

📦 More From Me

zo_animated_border: Modern gradient border animations.
zo_app_blocker: A Flutter plugin to block specific applications on Android.
zo_micro_interactions: A curated set of high-quality Flutter micro-interactions designed for modern, polished apps.
zo_screenshot: Prevent screenshots and record secure areas.
theme_manager_plus: Manage Flutter themes with custom classes.
ultimate_extension: Powerful utilities for Dart collections.
date_util_plus: Simplified date & time utilities.
pick_color: Extract colors from images by tapping.