on_connectivity_widget

Pub.dev Platforms Flutter

on_connectivity_widget is a Flutter Package used to listen network states and show a custom message to application.

This Plugin uses connectivity_plus as dependency to listen network states and on_toast_widget to show custom and animated messages.

Help:

Any problem? Issues
Any suggestion? Pull request

Translations:

NOTE: Feel free to help with readme translations

Topics:

How to Install:

Add the following code to your pubspec.yaml:

dependencies:
  on_connectivity_widget: ^1.1.0

Some Features:

  • Everytime network state change, will shown a message.
  • All message has a default widget, but, you can create your own.
  • You can define Animation type.
  • You can create/set your own Animation.
  • You can define how long Animation will last.
  • You can define Position type.
  • You can create/set your own Position.
  • You can define how long Position will last.

TODO:

  • Fix bugs.
  • Add more default animations.
  • Add more [Features]

How to use:

OnConnectivityWidget() // The main widget to start using the plugin.

All types of parameters on this plugin:

ParametersArgumentsDescription
positionSlidePositionType?Used to define message position
bluetoothWidgetWidget?Widget shown when connection state is: Bluetooth.
wifiWidgetWidget?Widget shown when network state is: Wifi.
ethernetWidgetWidget?Widget shown when network state is: Ethernet.
mobileWidgetWidget?Widget shown when network state is: Mobile
noneWidgetWidget?Widget shown when network state is: Offline.
animationDurationDuration?Used to define how long animation will last.
messageDurationDuration?Used to define how long message will last.
messageDurationWhenOnlineDuration?Used to define how long message will after [showNoneUntilOnline].
animationTypeCurve?Used to define what animation type will be shown.
cancelInitStatebool?Used to define if message will shown when application starts.
showNoneUntilOnlinebool?Used to define if message will await until network connect.
customAnimationAnimation<Offset>?Used if you want use your own animation.
customPositionAlignment?Used if you want use your own position.

See more in Documentation

Example:

OnConnectivityWidget

  OnConnectivityWidget(
    animationDuration: Duration(seconds: 1),
    messageDuration: Duration(seconds: 2),
    position: SlidePositionType.BOTTOM,
    showNoneUntilOnline: true,
    messageDurationWhenOnline: Duration(seconds: 2),
    animationType: Curves.bounceInOut,
    cancelInitState: false,
    bluetoothWidget: OnMessageWidget(
      title: 'You\'re online',
      desc: 'Your current connection is: Bluetooth',
      color: Colors.lightBlue[200]!,
      icon: Icons.check_circle_outline_rounded,
    ),
    wifiWidget: const OnMessageWidget(
      title: 'You\'re online',
      desc: 'Your current connection is: Wifi',
      color: Colors.green,
      icon: Icons.check_circle_outline_rounded,
    ),
    ethernetWidget: OnMessageWidget(
      title: 'You\'re online',
      desc: 'Your current connection is: Ethernet',
      color: Colors.lightGreen[200]!,
      icon: Icons.check_circle_outline_rounded,
    ),
    mobileWidget: const OnMessageWidget(
      title: 'You\'re online',
      desc: 'Your current connection is: Mobile',
      color: Colors.blue,
      icon: Icons.check_circle_outline_rounded,
    ),
    noneWidget: const OnMessageWidget(
      title: 'You\'re offline',
      desc: 'Your current connection is: Offline',
      color: Colors.red,
      icon: Icons.error_outline_rounded,
    ),
    //customAnimation: null,
    //customPosition: null,
  ),;

LICENSE:

Libraries

on_connectivity_widget