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

Parameter	Type	Default	Description
child	Widget	required	The widget to wrap with the toast notifications
toastPosition	Alignment	Alignment.topCenter	Position where toasts appear
minShow	Duration	900ms	Minimum time to show offline toast
onlineAutoHide	Duration	2s	Auto-hide duration for online toast
animationDuration	Duration	250ms	Animation duration for show/hide
offlineTitle	String	"You're offline"	Title for offline toast
onlineTitle	String	"Back online"	Title for online toast
offlineDescription	String	"Please check your internet connection"	Description for offline toast
onlineDescription	String	"Internet connection restored"	Description for online toast
retryLabel	String	"Retry"	Text for retry button
onRetry	Function?	null	Callback for retry button
showRetryButton	bool	true	Whether to show retry button
showProgressBar	bool	true	Whether to show progress bar
alignment	Alignment	Alignment.topRight	Toast alignment

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!