Flutter Network Reachability Banner #

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

Features #

• 🌐 Automatic Detection: Monitors network connectivity in real-time
• 🎨 Customizable UI: Fully customizable colors, text, positioning, and animations
• 🔄 Retry Functionality: Built-in retry button with loading states
• ⚡ Lightweight: Minimal impact on app performance
• 🎯 Smart Timing: Prevents banner flicker with configurable minimum show duration
• 🛡️ Safe Area Support: Respects device safe areas and notches
• 📱 Material Design: Beautiful animations and Material Design components

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(
  position: BannerPosition.bottom,
  minShow: Duration(seconds: 1),
  onlineAutoHide: Duration(seconds: 3),
  animationDuration: Duration(milliseconds: 300),
  offlineLabel: Text('No internet connection'),
  onlineLabel: Text('Connected!'),
  retryLabel: Text('Retry'),
  offlineBackground: Colors.red.shade700,
  onlineBackground: Colors.green.shade700,
  elevation: 8,
  borderRadius: BorderRadius.circular(12),
  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 banner immediately, prevents flicker with minimum show duration
3. Recovery: Displays "back online" message briefly when connection is restored
4. Retry Logic: Optional retry button that can trigger custom logic and re-check connectivity

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!