Internet Connection Status.

A Flutter package to detect internet connection and show banners in your app.

Internet connection status for Flutter Internet connection status for Flutter


Features

  • Automatic internet connection detection using connectivity_plus and internet_connection_checker
  • Shows online/offline status banners automatically
  • Stylish blur glass-effect banners for online/offline status notifications
  • Customizable banners via widget or text parameters
  • Built with hooks_riverpod and flutter_hooks for reactive and declarative usage

Quickstart

Add dependency to your pubspec file

Add this to your pubspec.yaml:

dependencies:
  internet_connection_status: ^1.0.0

Add Internet Connection Status to Your App!

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:internet_connection_status/internet_connection_status.dart';

void main() {
  runApp(const ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Stack(
        children: [
          Scaffold(
            body: Center(child: Text("Internet Connection Status Example")),
          ),
          InternetConnectionStatus(),
        ],
      )
    );
  }
}

Customization

InternetConnectionStatus(
  position: InternetConnectionStatusPosition.top
  onlineTitle: "অনলাইনে ফিরে এসেছেন",
  onlineTitle: "অনলাইনে ফিরে এসেছেন",
  onlineSubtitle: "ইন্টারনেট সংযোগ পুনরায় সফল হয়েছে।",
  offlineTitle: "আপনি এখন অফলাইনে",
  offlineSubtitle: "ইন্টারনেট সংযোগ বিচ্ছিন্ন হয়েছে।",
  online: YourCustomOnlineWidget(),
  offline: YourCustomOfflineWidget(),
);

Public API

  • internetStatusStreamProvider
    StreamProvider

  • isInternetConnectedProvider
    Provider<bool?> — boolean internet connection status (null while loading)

  • InternetConnectionStatus (Widget)
    Shows online/offline banners automatically, customizable

  • NetworkConnectionStatusCard (Widget)
    Default styled banner card with blur glass effect

  • ConnectionStatus enum
    Enum for connected and disconnected

Platform Setup

Android Add these permissions to your android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

iOS Add this key to your ios/Runner/Info.plist:

<key>com.apple.security.network.server</key>
<true/>

Dependencies

connectivity_plus
internet_connection_checker
flutter_hooks
hooks_riverpod

License MIT License © ProgrammerHasan

Contributions Contributions and suggestions are welcome! Feel free to open issues or PRs.

Contact For questions or support, open an issue on GitHub or contact me at programmerhasan.s@gmail.com