wifi_indicator 1.0.3

A WiFi indicator widget that supports real-time network monitoring, multiple signal states, and filled/outline styles

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:wifi_indicator/wifi_indicator.dart';

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

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

  @override
  Widget build(BuildContext context) {
    // Wrap the app with WifiIndicatorProvider to enable network monitoring
    return WifiIndicatorProvider(
      child: MaterialApp(
        title: 'WiFi Indicator Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
          useMaterial3: true,
        ),
        home: const WifiIndicatorDemo(),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('WiFi Indicator Package '),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        actions: [
          // Live WiFi indicator in the app bar
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: WifiIndicator(
              size: 18,
              type: WifiIndicatorType.filled,
              color: Colors.white,
            ),
          ),
        ],
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Live Network Status Section
            _buildLiveStatusSection(context),
            _buildLiveStatusSection(context,isMultiColor: true),
            const SizedBox(height: 32),

            // All States Grid
            _buildSectionTitle('All Network States'),
            const SizedBox(height: 16),
            _buildAllStatesGrid(),
            const SizedBox(height: 32),

            // Filled vs Outline
            _buildSectionTitle('Filled vs Outline'),
            const SizedBox(height: 16),
            _buildFilledVsOutlineGrid(),
            const SizedBox(height: 32),

            // Custom Colors
            _buildSectionTitle('Custom Colors'),
            const SizedBox(height: 16),
            _buildCustomColorsGrid(),
            const SizedBox(height: 32),

            // Different Sizes
            _buildSectionTitle('Different Sizes'),
            const SizedBox(height: 16),
            _buildDifferentSizesRow(),
            const SizedBox(height: 32),

            // Status-based Colors
            _buildSectionTitle('Status-based Colors'),
            const SizedBox(height: 16),
            _buildStatusBasedColorsGrid(),
          ],
        ),
      ),
    );
  }

  Widget _buildLiveStatusSection(BuildContext context,
      {bool isMultiColor = false}) {
    return Card(
      elevation: 4,
      child: Padding(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          children: [
            Text(
              'Live Network Status ${(isMultiColor)?'isMultiColor':''}',
              style: const TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 24),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                WifiIndicator(
                  size: 40,
                  type: WifiIndicatorType.filled,
                  color: Theme.of(context).primaryColor,
                  statusColors: isMultiColor?{
                    NetworkStatus.none: Colors.red,
                    NetworkStatus.slow: Colors.orange,
                    NetworkStatus.medium: Colors.yellow[700]!,
                    NetworkStatus.fast: Colors.lightGreen,
                    NetworkStatus.veryFast: Colors.green,
                  }:null,
                ),
                const SizedBox(width: 2),
                // The example uses the public WifiIndicator API. To keep the example
                // compatible with the package's public exports we don't reference
                // the internal NetworkProvider type here. The live indicator to the
                // left updates automatically when the app is wrapped with WifiIndicator

              ],
            ),Row(
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const [
                    Text(
                      'Live Indicator',
                      style: TextStyle(
                        fontSize: 18,
                        fontWeight: FontWeight.w500,
                      ),
                    ),
                    SizedBox(height: 4),
                    Text(
                      'Wrap your app with WifiIndicatorProvider',
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                      style: TextStyle(
                        fontSize: 12,
                        color: Colors.grey,
                      ),
                    ),
                  ],
                ),
              ],
            )            // WifiIndicatorProvider.

          ],
        ),
      ),
    );
  }

  Widget _buildSectionTitle(String title) {
    return Text(
      title,
      style: const TextStyle(
        fontSize: 18,
        fontWeight: FontWeight.bold,
      ),
    );
  }

  Widget _buildAllStatesGrid() {
    return LayoutBuilder(builder: (context, constraints) {
      final int count = (constraints.maxWidth ~/ 160).clamp(2, 6);
      return GridView.count(
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        crossAxisCount: count,
        mainAxisSpacing: 16,
        crossAxisSpacing: 16,
        childAspectRatio: 1,
        children: NetworkStatus.values.map((status) {
          return _buildGridItem(
            status.label,
            WifiIndicator(
              size: 56,
              type: WifiIndicatorType.filled,
              color: Colors.blue,
              overrideStatus: status,
            ),
          );
        }).toList(),
      );
    });
  }

  Widget _buildFilledVsOutlineGrid() {
    return LayoutBuilder(builder: (context, constraints) {
      final int count = (constraints.maxWidth ~/ 160).clamp(2, 6);
      final children = <Widget>[];
      children.addAll(NetworkStatus.values.map((status) {
        return _buildGridItem(
          '${status.label}\nFilled',
          WifiIndicator(
            size: 56,
            type: WifiIndicatorType.filled,
            color: Colors.green,
            overrideStatus: status,
          ),
        );
      }));
      children.addAll(NetworkStatus.values.map((status) {
        return _buildGridItem(
          '${status.label}\nOutline',
          WifiIndicator(
            size: 56,
            type: WifiIndicatorType.outline,
            color: Colors.purple,
            overrideStatus: status,
          ),
        );
      }));

      return GridView.count(
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        crossAxisCount: count,
        mainAxisSpacing: 16,
        crossAxisSpacing: 16,
        childAspectRatio: 1,
        children: children,
      );
    });
  }

  Widget _buildCustomColorsGrid() {
    final colors = [
      Colors.red,
      Colors.orange,
      Colors.green,
      Colors.blue,
      Colors.purple,
    ];

    return LayoutBuilder(builder: (context, constraints) {
      final int count = (constraints.maxWidth ~/ 160).clamp(2, 6);
      return GridView.count(
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        crossAxisCount: count,
        mainAxisSpacing: 16,
        crossAxisSpacing: 16,
        childAspectRatio: 1,
        children: List.generate(5, (index) {
          return _buildGridItem(
            colors[index].toString().split('(')[1].split(')')[0],
            WifiIndicator(
              size: 56,
              type: WifiIndicatorType.filled,
              color: colors[index],
              overrideStatus: NetworkStatus.veryFast,
            ),
          );
        }),
      );
    });
  }

  Widget _buildDifferentSizesRow() {
    final sizes = [15.0, 25.0, 35.0, 50.0, 70.0];

    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: sizes.map((size) {
        return Column(
          children: [
            WifiIndicator(
              size: size,
              type: WifiIndicatorType.filled,
              color: Colors.indigo,
              overrideStatus: NetworkStatus.fast,
            ),
            const SizedBox(height: 8),
            Text(
              '${size.toInt()}px',
              style: const TextStyle(fontSize: 12),
            ),
          ],
        );
      }).toList(),
    );
  }

  Widget _buildStatusBasedColorsGrid() {
    final statusColors = {
      NetworkStatus.none: Colors.red,
      NetworkStatus.slow: Colors.orange,
      NetworkStatus.medium: Colors.yellow[700]!,
      NetworkStatus.fast: Colors.lightGreen,
      NetworkStatus.veryFast: Colors.green,
    };

    return LayoutBuilder(builder: (context, constraints) {
      final int count = (constraints.maxWidth ~/ 160).clamp(2, 6);
      return GridView.count(
        shrinkWrap: true,
        physics: const NeverScrollableScrollPhysics(),
        crossAxisCount: count,
        mainAxisSpacing: 16,
        crossAxisSpacing: 16,
        childAspectRatio: 1,
        children: NetworkStatus.values.map((status) {
          return _buildGridItem(
            status.label,
            WifiIndicator(
              size: 56,
              type: WifiIndicatorType.filled,
              statusColors: statusColors,
              overrideStatus: status,
            ),
          );
        }).toList(),
      );
    });
  }

  Widget _buildGridItem(String label, Widget icon) {
    return Card(
      elevation: 2,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 8.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(height: 8),
            Center(child: icon),
            const SizedBox(height: 10),
            Text(
              label,
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.w500,
              ),
            ),
          ],
        ),
      ),
    );
  }
}