In this tutorial, we’ll learn how to implement Online & Offline connectivity in flutter apps. Their time comes when we need to check the Internet connection. If the user doesn’t have an internet connection, then we’ll show them Drop Offline connection, which will be an Animated Container widget. It will also work both Wifi connectivity and mobile data.

Flutter is an Open Source project by Google Which allows us to Create App For Both Android & IOS Platform. So For this connectivity, we will use a Flutter package name flutter_offline. This plugin perfectly works for both Platform iOS and Android app. By using this Package You can Also check Connection for Android & IOS Platform, which is the Tinny Package.

💻 Installation

First, you will need to add package name flutter_offline:

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

Now run Flutter package get in your terminal which we’ll install flutter_offline package.

⚡️ Import

we’re Going to Wrap offlineBuilder with Builder widget because with the help of Builder Widget so we can show OfflineBuilder

With the help of the Bool Variable, we can access Connectivity state, with the help of Connectivity State, we can implement online & offline connectivity in the flutter app.

 

//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(
            title: Text("Connection"),
          ),
          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 ? Color(0xFF00EE44) : 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"),
                ),
              );
            },
          )),
    );
  }
}

 

Our 📷Final App will look like this:

Offline Connectivity

Offline connectivity

Online connectivity

Online connectivity

 

 

 

 

 

 

 

 

 

🤝 Show some support

If you liked the app, show some love  Here⭐️

Best tutorial to learn Flutter