connectivity_web 0.1.0+2

  • Readme
  • Changelog
  • Example
  • Installing
  • 73

Flutter Web Package (connectivity_web) #

A Flutter web package, that allows you to check internet status anytime or listen to event changes. There is a pre-built widget [OnOffWidget] to make things simple.

Check internet status anytime #

bool isOnline = ConnectivityWeb().isOnline.value;

Use the pre-built widget to display internet status in the screen #

OnOffWidget(
  online: Icon(Icons.signal_wifi_4_bar, color: Colors.green),
  offline: Icon(Icons.signal_wifi_off, color: Colors.red)
);

Listen events #

ConnectivityWeb().isOnline.observe((isOnline) {
  if (isOnline.newValue != isOnline.oldValue) print(isOnline.newValue);
});

You can find the full example here with Observer, Reaction, StreamController and OnOffWidget. #

Browser Internet Status Compatibility #

RTT Compatibility (Round-Trip Time) experimental technology #

0.0.1 - Initial release #

0.1.0+1 - Update README #

0.1.0+2 - Added pre-built widget #

  • Added OnOffWidget widget

example/lib/main.dart

import 'dart:async';
import 'package:connectivity_web/connectivity_web.dart';
import 'package:flutter/material.dart';
import 'package:flutter_mobx/flutter_mobx.dart';
import 'package:mobx/mobx.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Connectivity Web Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  StreamController<bool> _observableController = StreamController<bool>.broadcast();
  ReactionDisposer _reactionDisposer;

  @override
  dispose() {
    _observableController.close();
    _reactionDisposer();
    super.dispose();
  }

  @override
  void initState() {

    /// Using it as [Stream]
    /// Add changes to a [StreamController] (you can use Streambuilder to render widgets)
    ///
    /// You can achieve that with MobX Reaction
    _reactionDisposer = reaction((_) => ConnectivityWeb().isOnline.value, (value) {
      _observableController.add(value);
    });

    /// or
    /// Listening directly from [Observable] and updates the [StreamController]
    ConnectivityWeb().isOnline.observe((isOnline) {
      print('it\'s online: ${isOnline.newValue}');
      // _observarbleController.add(isOnline.newValue);
    });

    /// also you can use the Observer MobX Widget from [flutter_mobx]
    /// Observer(builder: (_) => MyCustomWidget());
    
    /// and you can use the ConnectivityWeb pre-built widget [OnOffWidget] (the easiest way)
    /// OnOffWidget(
    ///   online: Icon(Icons.signal_wifi_4_bar, color: Colors.green),
    ///   offline: Icon(Icons.signal_wifi_off, color: Colors.red)
    /// ),

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[

          /// StreamBuilder example
          StreamBuilder(
              initialData: ConnectivityWeb().isOnline.value,
              stream: _observableController.stream,
              builder: (BuildContext context, AsyncSnapshot<bool> snapshot) {
                if (!snapshot.hasData || snapshot.hasError) return Container();

                return Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    snapshot.data
                        ? Icon(Icons.signal_wifi_4_bar, color: Colors.green)
                        : Icon(Icons.signal_wifi_off, color: Colors.red),
                    SizedBox(width: 16),
                    Text('(StreamBuilder) ${snapshot.data ? "ONLINE":"OFFLINE"}'),
                  ],
                );
              }),

          Divider(),

          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[

              /// Pre-Built ConnectivityWeb Widget
              OnOffWidget(
                online: Icon(Icons.signal_wifi_4_bar, color: Colors.green),
                offline: Icon(Icons.signal_wifi_off, color: Colors.red)
              ),

              /// Observer example
              Observer(builder: (_) {
                var qRtt = ConnectivityWebUtil.getInternetQualityInfo(ConnectivityWeb().rtt.value).toString().split('.')[1];
                return Row(
                  children: <Widget>[
                    SizedBox(width: 16),
                    Text('(MobX Observer) ${ConnectivityWeb().isOnline.value ? "ONLINE":"OFFLINE"} - $qRtt'),
                  ],
                );
              })
            ],
          )
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  connectivity_web: ^0.1.0+2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:connectivity_web/connectivity_web.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
47
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
73
Learn more about scoring.

We analyzed this package on Mar 27, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Health suggestions

Format lib/connectivity_web.dart.

Run flutter format to format lib/connectivity_web.dart.

Format lib/src/widgets/OnOffWidget.dart.

Run flutter format to format lib/src/widgets/OnOffWidget.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
flutter_mobx ^1.0.1 1.1.0
mobx ^1.0.1 1.1.1
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test