How To Make Online Offline Connection Using Flutter App

Posted By Bajarangi soft , Posted On 06-11-2020

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 Connectivity is Online or Offline state.To implement this connectivity status we are going to use flutter_offline library.

How To Make Online Offline Connection Using Flutter App

Online Offline Connection
Step 1: We cannot directly remove the time stamp from Online Offline Connection but using the intl.dart package we can easily filter the date stamp from time stamp. So open your flutter project’s pubspec.yaml in code

dependencies:
  flutter:
    sdk: flutter
  flutter_offline: ^0.3.0

Step 2: After done saving the pubspec.yaml file, Open your flutter project root folder in Command Prompt or Terminal and execute flutter pub get command.

flutter pub get

Step 3: Open your project’s main.dart file and import material.dart and flutter_offline: ^0.3.0 . dart package.

import 'package:flutter_offline/flutter_offline.dart';

Complete Code For Online Offline Connection In Flutter
main.dart

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.red[700],
            title: Text("Connection Offline Online"),
          ),
          body: Builder(
            builder: (BuildContext context) {
              return OfflineBuilder(
                connectivityBuilder: (BuildContext context,
                    ConnectivityResult connectivity, Widget child) {
                  final bool connected =
                      connectivity != ConnectivityResult.none;
                  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.lightGreen : Color(0xFFEE4400),
                          child: connected
                              ?  Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              Text(
                                "OFFLINE",
                                style: TextStyle(color: Colors.white),
                              ),

                            ],
                          )
                              : Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              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<Color>(
                                      Colors.white),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),
                    ],
                  );
                },
                child: Center(
                  child: Text("ONLINE Or OFFLINE"),
                ),
              );
            },
          )),
    );
  }
}