Connection Notifier

A simple way to notify your user about the connection status as well as providing simple tools that help tracking the internet connection status.

Gallery

ConnectionNotifier

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    /// Wrap [MaterialApp] with [ConnectionNotifier], and that is it!
    return ConnectionNotifier( 
      child: MaterialApp(
        title: 'Connection Notifier Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(),
      ),
    );
  }
}

ConnectionNotificationOptions parameters catalog

---

Option	Description	Type	Default Value	Required
child	Child widget, typically [MaterialApp] or [CupertinoApp]	Widget	-	Yes
alignment	Alignment of the connection notification	AlignmentGeometry	AlignmentDirectional.topCenter	No
pauseConnectionListenerWhenAppInBackground	To pause listening to changes while app in background	bool	false	No
height	Height of the connection notification	double?	twice top padding	No
width	Width of the connection notification	double?	double.infinity	No
borderRadius	Border radius of the connection notification	BorderRadiusGeometry?	null	No
connectedBackgroundColor	Background color of the connection notification in connected state	Color?	Colors.green	No
disconnectedBackgroundColor	Background color of the connection notification in disconnected state	Color?	Colors.red	No
connectedDuration	Duration of the connection notification in connected state before it's auto dismissing	Duration?	2 seconds	No
disconnectedDuration	Duration of the connection notification in disconnected state before it's auto dismissing	Duration?	infinity	No
overlayAnimationType	Overlay animation type of the connection notification	OverlayAnimationType	OverlayAnimationType.fadeAndSlide	No
animationCurve	Animation curve of the connection notification	Curve?	Curves.fastOutSlowIn	No
animationDuration	Animation duration of the connection notification	Duration?	300 milliseconds	No
connectedContent	Content of connection notification in connected state. if this is given, it will override all the specific parameters for the default content in connected state, typically a [Row] widget	Widget?	null	No
disconnectedContent	Content of connection notification in disconnected state. if this is given, it will override all the specific parameters for the default content in disconnected state, typically a [Row] widget	Widget?	null	No
shouldAlwaysPullContentDownOnTopAlignment	If the content of the connection notification should be pulled down in case of top alignment and [height] is grater than twice of top padding only, to test it visually just set a [height] that is bigger than twice of top padding (300 for example) and toggle it between [true] and [false] to see it's effect	bool	true	No
hasIndicationIcon	If the default content has an indication icon	bool	true	No
textAndIconSeparationWidth	Distance between text and icon in default content	double?	10	No
connectedText	Text of the default content of the connection notification in connected state	String?	'Back Online'	No
disconnectedText	Text of the default content of the connection notification in disconnected state	String?	'Retrying'	No
connectedTextStyle	Text style of the default content of the connection notification in connected state	String?	null	No
disconnectedTextStyle	Text style of the default content of the connection notification in disconnected state	String?	null	No
connectedIcon	Icon of the default content of the connection notification in connected state	Icon?	Icon widget with [Icons.check]	No
disconnectedIcon	Icon of the default content of the connection notification in disconnected state	Icon?	Circular progress indicator	No
iconBoxSideLength	Length of each side (height and width) of the [SizedBox] that wraps the [Icon] of the default content of the connection notification	double?	10	No
connectedConnectionNotification	This is useful if you want to override default connection notification with a custom widget in connected state and it will use the alignment and animation	Widget?	null	No
disconnectedConnectionNotification	This is useful if you want to override default connection notification with a custom widget in disconnected state and it will use the alignment and animation	Widget?	null	No

ConnectionNotifierToggler

If you want to toggle between some widgets automatically based on connection state.

ConnectionNotifierToggler(
        onConnectionStatusChanged: (connected) {
          /// that means it is still in the initialization phase.
          if (connected == null) return;
          print(connected);
        },
        connected: Center(
          key: UniqueKey(),
          child: const Text(
            'Connected',
            style: TextStyle(
              color: Colors.green,
              fontSize: 48,
            ),
          ),
        ),
        disconnected: Center(
          key: UniqueKey(),
          child: const Text(
            'Disconnected',
            style: TextStyle(
              color: Colors.red,
              fontSize: 48,
            ),
          ),
        ),
      );

---

LocalConnectionNotifier

If you want to show the connection notification for a specific screen only.

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

  @override
  Widget build(BuildContext context) {
    return LocalConnectionNotifier(
      connectionNotificationOptions: const ConnectionNotificationOptions(
        alignment: Alignment.bottomCenter,
      ),
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Local connection Notifier Demo'),
        ),
      ),
    );
  }
}

---

ConnectionNotifierTools

Tools that make it very easy to check on the internet connection status ANY WHERE inside your project.

At first you need to initialize it before using it's data. To do that, simply call this:

  await ConnectionNotifierTools.initialize();

Then you can use these tools as you want:

 /// A boolean that has the latest update about the connection status.
 ConnectionNotifierTools.isConnected;

 /// A broadcast stream that emits on every change in the connection status. 
 ConnectionNotifierTools.onStatusChange;

And that's it!

Attribution

This package depends on the following (Big Thanks):

internet_connection_checker
rxdart

License

MIT License