Flutter Network Status - Check Flutter Offline, Network Connectivity status

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

 

Network Connectivity Status

 

 

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

Other Flutter Examples

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

1136 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions