How do i check connected network type in Flutter application

Last updated Nov 15, 2021

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

dependencies:
  connectivity_plus: ^2.0.2

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 :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

503 Views