How to Detech VPN Connection is Active in Flutter

In this guide, we are going to show you how to detect if a VPN (Virtual Private Network) connection is active or not with a Flutter app. You may need this feature, so that you can ask the user to deactivate it. 

Step 1: Add vpn_connection_detector package to the project.

First, you need to add vpn_connection_detector package to your project with the following terminal command.

flutter pub add vpn_connection_detector

Or, add the following lines to pubspec.yaml file. 

dependencies:
  vpn_connection_detector: ^1.0.10

How to detect VPN Connection is active?

To check if VPN connection is active or not in the Flutter app, use the following code.

import 'package:vpn_connection_detector/vpn_connection_detector.dart';

final vpnDetector = VpnConnectionDetector();

Check VPN connection is active or not manually:

if(await VpnConnectionDetector.isVpnActive()){
       //VPN connection is active
}else{
       //VPN connection is not active
}

Or, you can also listen to a stream if VPN connection is changed on future with the following code.

vpnDetector.vpnConnectionStream.listen((state) {
  if (state == VpnConnectionState.connected) {
      //vpn got active
  } else {
      //vpn got deactivated
  }

  setState(() {});
});

To dispose the declaration variable:

vpnDetector.dispose();

Full Code Example:

import 'package:flutter/material.dart';
import 'package:vpn_connection_detector/vpn_connection_detector.dart';

void main() {
  runApp(MyApp()); 
}

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
          useMaterial3: false
        ),
        home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return _Home();
  }
}

class _Home extends State<HomePage>{
  final vpnDetector = VpnConnectionDetector();
  bool vpnconnection = false;



  detectVPN() async {
    if(await VpnConnectionDetector.isVpnActive()){
       vpnconnection = true;
    }else{
       vpnconnection = false;
    }
    setState(() { //refresh page
       
    });

    //listen any future status of VPN connection.

    vpnDetector.vpnConnectionStream.listen((state) {
      if (state == VpnConnectionState.connected) {
        vpnconnection = true;
      } else {
        vpnconnection = false;
      }

      setState(() {});
    });
  }

  @override
  void initState() {
    detectVPN();
    super.initState();
  }

  @override
  void dispose() {
    vpnDetector.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
          appBar: AppBar(
              title:Text("Detect VPN Flutter"),
          ),
          body: SingleChildScrollView( 
            child: Container(
                child: Center(
                  child: Text(vpnconnection?"VPN Connected":"VPN Not Connected"),
                ),
            )
          )
    );
  }
}

Output of the Code:

[Archived image missing]

In this way, you can detect VPN connection is active or not in Flutter app and make sure your users are not communicating with VPN.