flutter_network_reachability_banner 1.0.1

flutter_network_reachability_banner: ^1.0.1 copied to clipboard

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(
        primaryColor: Colors.black,
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.black,
          foregroundColor: Colors.white,
        ),
        useMaterial3: true,
      ),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Network Reachability Banner'),
        centerTitle: true,
      ),
      body: Padding(
        padding: const EdgeInsets.all(12),
        child: Column(
          spacing: 6,
          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: [
                        const Icon(
                          Icons.info_outline,
                          size: 16,
                          color: Colors.black,
                        ),
                        const SizedBox(width: 4),
                        Text(
                          'Turn Off WiFi/Mobile Data To Test Offline Banners',
                          style:
                              Theme.of(context).textTheme.bodySmall?.copyWith(
                                    color: Colors.black,
                                    fontStyle: FontStyle.italic,
                                  ),
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ),
            DemoCard.outlined(
              title: 'Basic Usage',
              description: 'Simple Banner With Default Settings',
              icon: Icons.wifi,
              onTap: () => _navigateToDemo(context, const BasicDemoScreen()),
            ),
            DemoCard.outlined(
              title: 'Customized Banner',
              description: 'Custom Colors, Text, And Styling',
              icon: Icons.palette,
              onTap: () =>
                  _navigateToDemo(context, const CustomizedDemoScreen()),
            ),
            DemoCard.outlined(
              title: 'Bottom Position',
              description: 'Banner Positioned At The Bottom',
              icon: Icons.vertical_align_bottom,
              onTap: () =>
                  _navigateToDemo(context, const BottomBannerDemoScreen()),
            ),
            DemoCard.outlined(
              title: 'Retry Functionality',
              description: 'Custom Retry Logic And Button',
              icon: Icons.refresh,
              onTap: () => _navigateToDemo(context, const RetryDemoScreen()),
            ),
            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: Colors.black,
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Icon(
                  icon,
                  color: Colors.white,
                  size: 20,
                ),
              ),
              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,
              ),
            ],
          ),
        ),
      ),
    );
  }
}