Check Flutter Network Status - Connectivity with RRutors

Last updated Mar 30, 2021

In this post, we will learn how to check Network connectivity status in Flutter Application. In every Flutter application there is a scenario to check Network connectivity, is user device is offline status or online status. To implement this connectivity status we are going to use flutter_offline library. This example updated with null-safety feature. In this example we are showing the different url to open when user has proper network connection. To open web url we have used url_lancher plugin.

Installation

First, you will need to add package name flutter_offline:

In the dependencies: section of your pubspec.yaml, add the following lines as

dependencies:
  flutter:
    sdk: flutter
  flutter_offline: "^2.0.0"
  url_launcher: ^6.0.3

Here we have added other library url_launcher which will used to launch the web URLs with the device default browser.

Import

import below lines in main dart file

import 'package:flutter_offline/flutter_offline.dart';
import 'package:url_launcher/url_launcher.dart';

Constructor

factory OfflineBuilder({
  Key key,
  @required ValueWidgetBuilder connectivityBuilder,
  Duration debounceDuration = kOfflineDebounceDuration,
  WidgetBuilder builder,
  Widget child,
  WidgetBuilder errorBuilder,
})

The library provides the above property to handle the Offline/Online status of the network state.

import 'package:flutter/material.dart';
import 'package:flutter_offline/flutter_offline.dart';
import 'package:url_launcher/url_launcher.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  bool isconnected;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    isconnected=false;
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          backgroundColor: Colors.blueGrey,
          appBar: AppBar(
            backgroundColor: Colors.blueGrey,
            title: Text("Connection"),
          ),
          body: Builder(
            builder: (BuildContext context) {
              return OfflineBuilder(
                connectivityBuilder: (BuildContext context,
                    ConnectivityResult connectivity, Widget child) {
                  final bool connected =
                      connectivity != ConnectivityResult.none;

                  isconnected=connected;

                  return Stack(
                    fit: StackFit.expand,
                    children: [
                      child,
                      Positioned(
                        left: 0.0,
                        right: 0.0,
                        height: 32.0,
                        child: AnimatedContainer(
                          duration: const Duration(milliseconds: 300),
                          color:
                          connected ? Colors.green : Color(0xFFEE4400),
                          child: connected
                              ?  Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(
                                "Online",
                                style: TextStyle(color: Colors.white),
                              ),

                            ],
                          )
                              : Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              Text(
                                "Offline",
                                style: TextStyle(color: Colors.white),
                              ),
                              SizedBox(
                                width: 8.0,
                              ),
                              SizedBox(
                                width: 12.0,
                                height: 12.0,
                                child: CircularProgressIndicator(
                                  strokeWidth: 2.0,
                                  valueColor:
                                  AlwaysStoppedAnimation(
                                      Colors.white),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  );
                },
                child: GridView(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                  children: [
                    Card(
                      elevation: 5,
                      child: InkWell(onTap:(){
                        if(isconnected)
                        {
                          _launchInBrowser("https://rrtutors.com");
                        }
                      },child: Image.network("https://image.freepik.com/free-vector/flat-design-world-book-day_23-2148477245.jpg",height: 400,)),
                    ), InkWell(
                      onTap:(){
                        if(isconnected)
                        {
                          _launchInBrowser("https://rrtutors.com/FlutterTutorial");
                        }
                      },
                      child: Card(
                        elevation: 5,
                        child: Image.network("https://image.freepik.com/free-vector/hand-drawn-world-book-day-background_23-2148472565.jpg",height: 400,),
                      ),
                    ), Card(
                      elevation: 5,
                      child: Image.network("https://img.freepik.com/free-vector/world-book-day-flat-design_23-2148470658.jpg?size=338&ext=jpg&ga=GA1.2.585042520.1600603683",height: 400,),
                    ), Card(
                      elevation: 5,
                      child: Image.network("https://img.freepik.com/free-vector/beautiful-hand-drawn-book-logotypes_23-2147594677.jpg?size=338&ext=jpg&ga=GA1.2.585042520.1600603683",height: 400,),
                    ), Card(
                      elevation: 5,
                      child: Image.network("https://img.freepik.com/free-vector/hand-drawn-world-book-day-concept_52683-35349.jpg?size=338&ext=jpg&ga=GA1.2.585042520.1600603683",height: 400,),
                    ), Card(
                      elevation: 5,
                      child: Image.network("https://image.freepik.com/free-vector/flat-design-world-book-day_23-2148477245.jpg",height: 400,),
                    ), Card(
                      elevation: 5,
                      child: Image.network("https://image.freepik.com/free-vector/flat-design-world-book-day_23-2148477245.jpg",height: 400,),
                    ),
                  ],
                ),
              );
            },
          )),
    );
  }
  Future _launchInBrowser(String url) async {
    if (await canLaunch(url)) {
      await launch(
        url,
        forceSafariVC: false,
        forceWebView: false,
      );
    } else {
      throw 'Could not launch $url';
    }
  }
}

Network Connectivity Status

Tags: Flutter Offline, Flutter Network status, Flutter Check Internet status, Offline Online status

Other Flutter Examples

Article Contributed By :

2497 Views