7

how do you continously check internet access? I was able to show if wifi is connectected or mobile data. However, not all connection would have internet access.

 import 'package:connectivity/connectivity.dart';

var connectivityResult = await (Connectivity().checkConnectivity());
if (connectivityResult == ConnectivityResult.mobile) {
  // I am connected to a mobile network.
} else if (connectivityResult == ConnectivityResult.wifi) {
  // I am connected to a wifi network.
}

This is currently the code im using. I was hoping how someone could check continously of internet access?

1

4 Answers 4

22

Here is the way you can build Network Aware applications

High level overview

  1. Create a service that listen to Connectivity change events, for
    example wifi, mobile and none (offline). This service will emit
    NewtorkStatus (our custom class) into a stream every time the
    Connectivity changes.

  2. Create consumer for the above NetworkStatus stream that will be
    notified everytime the NetworkStatus changes.

  3. Based on the network status rebuild the HomeScreen to show either
    online or offline contents.

Sounds tricky but its actually easy to implement, we will be using connectivity & provider package to our rescue.

Firstly configure our project to use above dependencies, edit pubspec.yaml to include the dependencies -

dependencies:
  flutter:
    sdk: flutter
  connectivity: ^3.0.6
  provider: ^6.0.1

Run $ pub get you synchronise all the dependencies.

Now we will create our own NewtorkStatusService this service will use NetworkStatus enumeration with two states Online & Offline to notify the Connectivity state.

network_status_service.dart

enum NetworkStatus { 
  Online, 
  Offline 
}

Now our NetworkStatusService will use the Connectivity package to get status of current connection status (wifi, mobile, none) and based on that it will emit a new NetworkStatus to stream. Our final NetworkStatusService would look something like this -

network_status_service.dart

import 'dart:async';
import 'package:connectivity/connectivity.dart';

enum NetworkStatus { Online, Offline }

class NetworkStatusService {
  StreamController<NetworkStatus> networkStatusController =
      StreamController<NetworkStatus>();

  NetworkStatusService() {
    Connectivity().onConnectivityChanged.listen((status){
      networkStatusController.add(_getNetworkStatus(status));
    });
  }

  NetworkStatus _getNetworkStatus(ConnectivityResult status) {
    return status == ConnectivityResult.mobile || status == ConnectivityResult.wifi ? NetworkStatus.Online : NetworkStatus.Offline;
  }
}

Now we will create our won custom widget that will return either an onlineChild or offlineChild based on NetworkStatus value. Here we will use provider package to get NetworkStatus. I would look something like this -

network_aware_widget.dart

import 'package:flutter/material.dart';
import 'package:flutter_network_aware_app/services/network_status_service.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:provider/provider.dart';

class NetworkAwareWidget extends StatelessWidget {
  final Widget onlineChild;
  final Widget offlineChild;

  const NetworkAwareWidget({Key? key, required this.onlineChild, required this.offlineChild})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    NetworkStatus networkStatus = Provider.of<NetworkStatus>(context);
    if (networkStatus == NetworkStatus.Online) {
      return onlineChild;
    } else {
      _showToastMessage("Offline");
      return offlineChild;
    }
  }

  void _showToastMessage(String message){
    Fluttertoast.showToast(
        msg: message,
        toastLength: Toast.LENGTH_LONG,
        gravity: ToastGravity.BOTTOM,
        timeInSecForIosWeb: 1
    );
  }
}

Here I am also using the FlutterToast to show toast message (just to add some interactivity to app)

Now's the fun part we will bring all the pieces together to make our app respond to NetworkStatus value. We will use out custom made widget inside a StreamProvider widget. The StreamProvider will subscribe on the NewtorkStatusService networkStatusController stream and trigger a build on child components every time the NetworkStatus changes to Online or Offline. Here's how it will look -

home.dart

import 'package:flutter/material.dart';
import 'package:flutter_network_aware_app/services/network_status_service.dart';
import 'package:flutter_network_aware_app/ui/components/network_aware_widget.dart';
import 'package:provider/provider.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Network Aware App"),
      ),
      body: StreamProvider<NetworkStatus>(
        create: (context) =>
            NetworkStatusService().networkStatusController.stream,
        child: NetworkAwareWidget(
          onlineChild: Container(
            child: Center(
              child: Text(
                "I am online",
                style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.w600),
              ),
            ),
          ),
          offlineChild: Container(
            child: Center(
              child: Text(
                "No internet connection!",
                style: TextStyle(
                    color: Colors.grey[400],
                    fontWeight: FontWeight.w600,
                    fontSize: 20.0),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

As you can see we are wrapping our NetworkAwareWidget inside a StreamProvider of NetworkStatus. StreamProvider also makes sure that on create it will subscribe to the NetworkStatusService controller stream.

Finally our app starting point main.dart will look something like this -

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_network_aware_app/ui/screens/home_screen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        debugShowCheckedModeBanner: false,
        theme: ThemeData.dark().copyWith(primaryColor: Colors.blue),
        home: Home());
  }
}

The application would work as follows -

Online Offline Demo

I hope this helps you to build you own network aware app and components!

2
  • 3
    Package connectivity has been deprecated; you might want to update your answer to use connectivity_plus.
    – Jago
    Mar 11, 2022 at 22:43
  • 1
    It doesn't answer the question! Oct 1, 2023 at 13:01
4

You can use this alternative, without using any packages. Call this function whenever you need to check internet connectivity

Future<bool> internetConnectivity() async {
try {
  final result = await InternetAddress.lookup('google.com');
  if (result.isNotEmpty && result[0].rawAddress.isNotEmpty) {
    return true;
  }
} on SocketException catch (_) {
  return false;
}
return false;

}

2
  • I tried this, using mobile data (I dont have internet acces); it still returns true because it is able to gather result from internetadress.lookup. Thanks tho
    – John
    Jun 27, 2020 at 14:07
  • I guess you just have to lookup an address that's less pervasive than google
    – aolsan
    Jun 9, 2022 at 10:52
3

You can use this https://pub.dev/packages/connectivity_widget . By installing this package use this code in your build function.

ConnectivityWidget(
        builder: (context, isOnline) => Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("${isOnline ? 'Online' : 'Offline'}", style: TextStyle(fontSize: 30, color: isOnline ? Colors.green : Colors.red),),
              SizedBox(height: 20,),
              Text(
                'Number of times we connected to the internet:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.display1,
              ),
            ],
          ),
        )
4
  • Does your solution checks the internet connectivity repeatedly? Jul 9, 2020 at 6:03
  • 1
    I am using this widget but shows that i am offline even though i am online Jul 9, 2020 at 6:04
  • Yes. It checks internet connectivity repeatedly. Can share your code? Jul 9, 2020 at 6:24
  • I have used flutter_offline plugin and it worked. here is the link to my project repo github.com/umakanth-pendyala/DO-List-APP-flutter.git. You don't have to go through the entire project just see lib/screens/connectivity_screen.dart. feel free to clone the project and implement your solution, and if it works please tell me Jul 9, 2020 at 6:45
2

connectivity package is just for discovering network connectivity. if you want to be sure about internet access you can use data_connection_checker.

Not the answer you're looking for? Browse other questions tagged or ask your own question.