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.
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 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';
}
}
}
|
Tags: Flutter Offline, Flutter Network status, Flutter Check Internet status, Offline Online status
Other Flutter Examples
|
Article Contributed By :
|
|
|
|
|
1991 Views |
|