Internet is a global network that connects billions of computers across the world with each other and to the World Wide Web.
Many application need to check Internet Connection before going to proceeds into main screen, So we will check internet connectivity status in flutter.
Internet require to exchange information such as watching tutorials, downloading and uploading content etc.
There is a package that allows us to discover the network connectivity status, named connectivity_plus package.
connectivity :- To check connectivity status and connectivity type.
connectionSubscription :- helps to subscribe the internet connection statusupdatestream that helps to show connectivity status automatically when it is changed.
dispose() :- dispose method cancelthesubscription when the the widget is remove from the widget tree permanently.
getConnectivity() :- asynchronous method called from initState to checkinternetconnectivitystatus. Try and catch block use to handle the Exception, If failed to get connection status.
updateConnectionStatus() :- asynchronous method called when connectivity changed.
Code to listen Connectivity changes
Create the Buildmethod to create the user interface and display connection status.
Flutter developer with expertise in Firebase and Xcode. Builds tailored Android apps featuring innovative solutions and seamless integration to drive client success.
I change a little bit your version , because it have some types errors , for example the getConnectivity return a List but you asign it direcly to variable ConnectivityResult connectivityResult , Thank you for sharring _ConnectivityPageState();
}
class _ConnectivityPageState extends State {
Connectivity connectivity = Connectivity();
IconData? icon;
String connectionType = “No internet connection”;
bool isOffline = true;
late StreamSubscription connectionSubscription;
Thanks for reading!!
Yes, We agree with you in latest version of connectivity_plus package (connectivity_plus: ^6.0.3) returns List but in this blog i have used connectivity_plus package version (connectivity_plus: ^3.0.3) that return ConnectivityResult and that is why we are assigning it to variable.
}
class _ConnectivityPageState extends State {
Connectivity connectivity = Connectivity();
IconData? icon;
String connectionType = “No internet connection”;
bool isOffline = true;
late StreamSubscription connectionSubscription;
@override
void initState() {
super.initState();
getConnectivity();
connectionSubscription = connectivity.onConnectivityChanged
.listen((List connectivityResultList) {
if (connectivityResultList.isNotEmpty) {
ConnectivityResult result = connectivityResultList[0];
updateConnectionStatus(result);
}
});
}
Future getConnectivity() async {
late ConnectivityResult result;
try {
List connectivityResult =
await connectivity.checkConnectivity();
if (connectivityResult.isNotEmpty) {
result = connectivityResult[0];
}
getConnectionType(result);
} on PlatformException catch (e) {
developer.log(“Couldn\’t check connectivity status”, error: e);
icon = Icons.signal_wifi_connected_no_internet_4;
return;
}
if (!mounted) {
return Future.value(null);
}
return updateConnectionStatus(result);
}
Future updateConnectionStatus(ConnectivityResult result) async {
getConnectionType(result);
if (result == ConnectivityResult.none) {
setState(() {
isOffline = true;
});
} else {
setState(() {
isOffline = false;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(“Internet Connectivity”),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(icon, size: 80, color: isOffline ? Colors.red : Colors.green),
Padding(
padding: EdgeInsets.symmetric(vertical: 8.0),
child: Text(connectionType,
style: TextStyle(fontSize: 17, fontWeight: FontWeight.w500)),
),
Text(“isOffline $isOffline”,
style: TextStyle(fontSize: 16, fontWeight: FontWeight.normal)),
],
),
),
);
}
void getConnectionType(result) {
if (result == ConnectivityResult.mobile) {
connectionType = “Internet connection is from Mobile data”;
icon = Icons.network_cell;
} else if (result == ConnectivityResult.wifi) {
connectionType = “Internet connection is from wifi”;
icon = Icons.network_wifi_sharp;
} else if (result == ConnectivityResult.ethernet) {
connectionType = “Internet connection is from wired cable”;
icon = Icons.settings_ethernet;
} else if (result == ConnectivityResult.bluetooth) {
connectionType = “Internet connection is from Bluetooth tethering”;
icon = Icons.network_wifi_sharp;
} else if (result == ConnectivityResult.none) {
connectionType = “No internet connection”;
icon = Icons.signal_wifi_connected_no_internet_4;
}
}
}