flutter_network_reachability_banner 1.0.0

A minimal and elegant Flutter package that displays offline/online toast notifications with retry functionality. Perfect for reducing support noise during network outages.

example/lib/main.dart

import 'package:flutter/material.dart';

import 'screens/basic_demo_screen.dart';
import 'screens/bottom_banner_demo_screen.dart';
import 'screens/custom_service_demo_screen.dart';
import 'screens/customized_demo_screen.dart';
import 'screens/retry_demo_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Network Reachability Banner Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Network Reachability Banner'),
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            Card.outlined(
              child: Padding(
                padding: const EdgeInsets.all(16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Flutter Network Reachability Banner',
                      style: Theme.of(context).textTheme.titleMedium?.copyWith(
                            fontWeight: FontWeight.bold,
                          ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      'A Minimal And Elegant Package For Displaying Offline/Online Banners With Retry Functionality.',
                      style: Theme.of(context).textTheme.bodyMedium,
                    ),
                    const SizedBox(height: 8),
                    Row(
                      children: [
                        Icon(Icons.info_outline,
                            size: 16,
                            color: Theme.of(context).colorScheme.primary),
                        const SizedBox(width: 4),
                        Text(
                          'Turn Off WiFi/Mobile Data To Test Offline Banners',
                          style: Theme.of(context)
                              .textTheme
                              .bodySmall
                              ?.copyWith(
                                color: Theme.of(context).colorScheme.primary,
                                fontStyle: FontStyle.italic,
                              ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
            const SizedBox(height: 24),
            Expanded(
              child: ListView(
                physics: const BouncingScrollPhysics(),
                children: [
                  DemoCard.outlined(
                    title: 'Basic Usage',
                    description: 'Simple Banner With Default Settings',
                    icon: Icons.wifi,
                    onTap: () =>
                        _navigateToDemo(context, const BasicDemoScreen()),
                  ),
                  const SizedBox(height: 12),
                  DemoCard.outlined(
                    title: 'Customized Banner',
                    description: 'Custom Colors, Text, And Styling',
                    icon: Icons.palette,
                    onTap: () =>
                        _navigateToDemo(context, const CustomizedDemoScreen()),
                  ),
                  const SizedBox(height: 12),
                  DemoCard.outlined(
                    title: 'Bottom Position',
                    description: 'Banner Positioned At The Bottom',
                    icon: Icons.vertical_align_bottom,
                    onTap: () => _navigateToDemo(
                        context, const BottomBannerDemoScreen()),
                  ),
                  const SizedBox(height: 12),
                  DemoCard.outlined(
                    title: 'Retry Functionality',
                    description: 'Custom Retry Logic And Button',
                    icon: Icons.refresh,
                    onTap: () =>
                        _navigateToDemo(context, const RetryDemoScreen()),
                  ),
                  const SizedBox(height: 12),
                  DemoCard.outlined(
                    title: 'Custom Service',
                    description: 'Custom Reachability Service Implementation',
                    icon: Icons.settings,
                    onTap: () => _navigateToDemo(
                        context, const CustomServiceDemoScreen()),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _navigateToDemo(BuildContext context, Widget screen) {
    Navigator.of(context).push(
      MaterialPageRoute(builder: (context) => screen),
    );
  }
}

class DemoCard extends StatelessWidget {
  final String title;
  final String description;
  final IconData icon;
  final VoidCallback onTap;

  const DemoCard.outlined({
    super.key,
    required this.title,
    required this.description,
    required this.icon,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return Card.outlined(
      clipBehavior: Clip.antiAlias,
      child: InkWell(
        onTap: onTap,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Row(
            children: [
              Container(
                padding: const EdgeInsets.all(8),
                decoration: BoxDecoration(
                  color: Theme.of(context).colorScheme.primaryContainer,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Icon(
                  icon,
                  color: Theme.of(context).colorScheme.onPrimaryContainer,
                ),
              ),
              const SizedBox(width: 16),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      title,
                      style: Theme.of(context).textTheme.titleSmall?.copyWith(
                            fontWeight: FontWeight.w600,
                          ),
                    ),
                    Text(
                      description,
                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                            color:
                                Theme.of(context).colorScheme.onSurfaceVariant,
                          ),
                    ),
                  ],
                ),
              ),
              Icon(
                Icons.arrow_forward_ios,
                size: 16,
                color: Theme.of(context).colorScheme.onSurfaceVariant,
              ),
            ],
          ),
        ),
      ),
    );
  }
}