The Internet is the basic need for any App to work. When a user opens an App, it is better practice to find if the internet is active or not and inform the user if there is no internet connection. There are many ways the user can be notified which changes from App to App. Below are few ways which can be used,
- Through a simple push notification.
- Through an alert or a dialog.
- Through an independent page with some custom good looking design.
Additionally, the App should be able to resume if the change in network connection state starts working.
You have to use the ‘Connectivity Flutter Package’ to achieve this feature on your App. This package helps to know either your device is online or offline. You have to subscribe StreamSubscription
returned by this package to show the internet connection message automatically like below.
Step 1: Add the connectivity plus plugin inside the pubspec.yaml
file
Now, see the example below, and apply exactly same method to show internet connection offline message automatically in your app layout.
full-code example:
import 'dart:async';
import 'package:connectivity_plus/connectivity_plus.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class CheckConnection extends StatefulWidget{
@override
State createState() {
return _CheckConnection();
}
}
class _CheckConnection extends State{
StreamSubscription? internetconnection;
bool isoffline = false;
//set variable for Connectivity subscription listiner
@override
void initState() {
internetconnection = Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
// whenevery connection status is changed.
if(result == ConnectivityResult.none){
//there is no any connection
setState(() {
isoffline = true;
});
}else if(result == ConnectivityResult.mobile){
//connection is mobile data network
setState(() {
isoffline = false;
});
}else if(result == ConnectivityResult.wifi){
//connection is from wifi
setState(() {
isoffline = false;
});
}
}); // using this listiner, you can get the medium of connection as well.
super.initState();
}
@override
dispose() {
super.dispose();
internetconnection!.cancel();
//cancel internent connection subscription after you are done
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title:Text("Flutterfever Connection")),
body:SingleChildScrollView(
child: Column(children: [
Container(
child: errmsg("No Internet Connection Available", isoffline),
//to show internet connection message on isoffline = true.
),
Container(
//this is your content
margin: EdgeInsets.all(30),
width:double.infinity,
child: Center(
child:Text("Check Connections for flutterfever.com",
style:TextStyle(fontSize:20)
)
)
)
],)
)
);
}
Widget errmsg(String text,bool show){
//error message widget.
if(show == true){
//if error is true then show error message box
return Container(
padding: EdgeInsets.all(10.00),
margin: EdgeInsets.only(bottom: 10.00),
color: Colors.red,
child: Row(children: [
Container(
margin: EdgeInsets.only(right:6.00),
child: Icon(Icons.info, color: Colors.white),
), // icon for error message
Text(text, style: TextStyle(color: Colors.white)),
//show error message text
]),
);
}else{
return Container();
//if error is false, return empty container.
}
}
}