Flutter Network Reachability Banner #

A minimal and elegant Flutter package that displays offline/online toast notifications with retry functionality. Perfect for reducing support noise during network outages by providing clear visual feedback to users about their connectivity status using beautiful toast notifications.

Features #

• 🌐 Automatic Detection: Monitors network connectivity in real-time
• 🎨 Toast Notifications: Beautiful toast notifications using toastification library
• 🔄 Retry Functionality: Built-in retry button with loading states
• ⚡ Lightweight: Minimal impact on app performance
• 🎯 Smart Timing: Prevents notification flicker with configurable minimum show duration
• 📍 Flexible Positioning: Toast notifications can appear from any position (top, center, bottom)
• 📱 Modern UI: Beautiful animations and modern design with blur effects

Getting Started #

Add this package to your pubspec.yaml:

dependencies:
  flutter_network_reachability_banner: ^0.1.0

Then run:

flutter pub get

Usage #

Basic Usage #

Wrap your app or any widget with NetworkReachabilityBanner:

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NetworkReachabilityBanner(
        child: Scaffold(
          appBar: AppBar(title: Text('My App')),
          body: Center(
            child: Text('Your app content here'),
          ),
        ),
      ),
    );
  }
}

Advanced Usage with Customization #

NetworkReachabilityBanner(
  toastPosition: Alignment.bottomCenter,
  minShow: Duration(seconds: 1),
  onlineAutoHide: Duration(seconds: 3),
  animationDuration: Duration(milliseconds: 300),
  offlineTitle: 'No internet connection',
  onlineTitle: 'Connected!',
  offlineDescription: 'Please check your network settings',
  onlineDescription: 'Your connection has been restored',
  retryLabel: 'Retry',
  showRetryButton: true,
  showProgressBar: true,
  alignment: Alignment.bottomCenter,
  onRetry: () async {
    // Custom retry logic
    await Future.delayed(Duration(seconds: 1));
    print('Retry attempted');
  },
  child: YourAppWidget(),
)

Custom Reachability Service #

You can provide your own reachability service for custom network checking logic:

class CustomReachabilityService implements ReachabilityService {
  // Implement your custom network checking logic
}

NetworkReachabilityBanner(
  service: CustomReachabilityService(),
  child: YourAppWidget(),
)

Configuration Options #

How It Works #

1. Detection: Uses connectivity_plus for basic connectivity and performs DNS lookups for actual internet verification
2. Smart Display: Shows offline toast notifications immediately, prevents flicker with minimum show duration
3. Recovery: Displays "back online" toast briefly when connection is restored
4. Retry Logic: Optional retry button in offline toasts that can trigger custom logic and re-check connectivity
5. Toast Management: Uses toastification library for beautiful, modern toast notifications with animations and blur effects

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

Author #

Muzamil Ghafoor

• GitHub: @muzzammil763

License #

This project is licensed under the MIT License - see the LICENSE file for details.

Support #

If you find this package helpful, please give it a ⭐ on GitHub!