When it comes to reliability checking on which network our application is connected or to check if our application is connected to the network or not is very important. It improved the user experience a lot so, In today's example, we will see how we can check on which network our Flutter app is connected. and check network type in flutter application
Let's Start
Step 1: Create a new Flutter Application.
Step 2: Add a line like this to your package's pubspec.yaml
|
Once installed you will get access to Connectivity Functions.
Step 3: Now Declare the ConnectivityResuit variable which will be used to detect the connection type also declare the connectivity variable and a Stream which will listen to the status for the network used in our application.
ConnectivityResult _connectionStatus = ConnectivityResult.none; final Connectivity _connectivity = Connectivity(); late StreamSubscription _connectivitySubscription; |
Step 4: We will write a Future function which will be called when our app is initialized
Future initConnectivity() async { late ConnectivityResult result; try { result = await _connectivity.checkConnectivity(); } on PlatformException catch (e) { print(e.toString()); return; } if (!mounted) { return Future.value(null); } return _updateConnectionStatus(result); } |
Complete Source Code to check Netowrk type in flutter application
import 'dart:async';
import 'package:connectivity_plus/connectivity_plus.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart';
void main() { runApp(MyApp()); }
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Check Network Connectivity', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Check Network Connectivity'), ); } }
class MyHomePage extends StatefulWidget { MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override _MyHomePageState createState() => _MyHomePageState(); }
class _MyHomePageState extends State { ConnectivityResult _connectionStatus = ConnectivityResult.none; final Connectivity _connectivity = Connectivity(); late StreamSubscription _connectivitySubscription;
@override void initState() { super.initState(); initConnectivity();
_connectivitySubscription = _connectivity.onConnectivityChanged.listen(_updateConnectionStatus); }
@override void dispose() { _connectivitySubscription.cancel(); super.dispose(); }
Future initConnectivity() async { late ConnectivityResult result; try { result = await _connectivity.checkConnectivity(); } on PlatformException catch (e) { print(e.toString()); return; } if (!mounted) { return Future.value(null); } return _updateConnectionStatus(result); }
Future _updateConnectionStatus(ConnectivityResult result) async { setState(() { _connectionStatus = result; }); }
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Connectivity Example'), ), body: Center( child: Padding( padding: const EdgeInsets.all(20), child: Text( 'Connection Status: $_connectionStatus', style: const TextStyle(fontSize: 45), textAlign: TextAlign.center, ), )), ); } }
|
Output:
Conclusion: So this way, we have learned how we can detect on which network type our Flutter Application is Connected.
Article Contributed By :
|
|
|
|
764 Views |