HOW TO CHECK IF USER IS ONLINE OR OFFLINE IN FLUTTER

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.

1. //main.dart
2. import 'package:flutter/material.dart';
3. import 'package:flutter_offline/flutter_offline.dart';
5. void main() => runApp(new MyApp());
7. class MyApp extends StatelessWidget {
8. @override
9. Widget build(BuildContext context) {
10. return MaterialApp(
11. debugShowCheckedModeBanner: false,
12. home: Scaffold(
13. appBar: AppBar(
14. title: Text("Connection"),
15. ),
16. body: Builder(
17. builder: (BuildContext context) {
18. return OfflineBuilder(
19. connectivityBuilder: (BuildContext context,
20. ConnectivityResult connectivity, Widget child) {
21. final bool connected =
22. connectivity != ConnectivityResult.none;
23. return Stack(
24. fit: StackFit.expand,
25. children: [
26. child,
27. Positioned(
28. left: 0.0,
29. right: 0.0,
30. height: 32.0,
31. child: AnimatedContainer(
32. duration: const Duration(milliseconds: 300),
33. color:
34. connected ? Color(0xFF00EE44) : Color(0xFFEE4400),
35. child: connected
36. ? Row(
37. mainAxisAlignment: MainAxisAlignment.center,
38. children: <Widget>[
39. Text(
40. "OFFLINE",
41. style: TextStyle(color: Colors.white),
42. ),
44. ],
45. )
46. : Row(
47. mainAxisAlignment: MainAxisAlignment.center,
48. children: <Widget>[
49. Text(
50. "OFFLINE",
51. style: TextStyle(color: Colors.white),
52. ),
53. SizedBox(
54. width: 8.0,
55. ),
56. SizedBox(
57. width: 12.0,
58. height: 12.0,
59. child: CircularProgressIndicator(
60. strokeWidth: 2.0,
61. valueColor:
62. AlwaysStoppedAnimation<Color>(
63. Colors.white),
64. ),
65. ),
66. ],
67. ),
68. ),
69. ),
70. ],
71. );
72. },
73. child: Center(
74. child: Text("ONLINE Or OFFLINE"),
75. ),
76. );
77. },
78. )),
79. );
80. }
81. }