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

Parameter	Type	Default	Description
`child`	`Widget`	required	The widget to wrap with the banner
`position`	`BannerPosition`	`BannerPosition.top`	Position of the banner (top/bottom)
`minShow`	`Duration`	`900ms`	Minimum time to show offline banner
`onlineAutoHide`	`Duration`	`2s`	Auto-hide duration for online banner
`animationDuration`	`Duration`	`250ms`	Animation duration for show/hide
`offlineLabel`	`Text`	`"You're offline"`	Text for offline state
`onlineLabel`	`Text`	`"Back online"`	Text for online state
`retryLabel`	`Text`	`"Retry"`	Text for retry button
`onRetry`	`Function?`	`null`	Callback for retry button
`offlineBackground`	`Color`	`Color(0xFF5A3B3B)`	Background color for offline banner
`onlineBackground`	`Color`	`Color(0xFF285D34)`	Background color for online banner
`elevation`	`double`	`6`	Material elevation for the banner
`safeArea`	`bool`	`true`	Respect device safe areas
`borderRadius`	`BorderRadius`	`BorderRadius.circular(8)`	Banner border radius

How It Works

Detection: Uses connectivity_plus for basic connectivity and performs DNS lookups for actual internet verification
Smart Display: Shows offline banner immediately, prevents flicker with minimum show duration
Recovery: Displays "back online" message briefly when connection is restored
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!

Flutter Network Reachability Banner