Integrating OpenVPN into a Flutter application for iOS involves a few steps. Remember that this is a simplified guide, and you may need to adapt it based on your specific use case and requirements. Ensure you have a basic understanding of Flutter development and that the necessary tools are installed.

Here’s a general outline of the steps:

 

1. Install Required Packages:

Add the openvpn_flutter package to your pubspec.yaml file:

dependencies:
  openvpn_flutter: ^1.0.1

Then run:

flutter clean
flutter upgrade
flutter pub upgrade
flutter pub get
dart fix --apply
flutter clean

flutter build ios


cd ios

pod install

Make sure you target ios 12 on pod file.

 

2. Native Integration:

The openvpn_flutter package relies on native code to work. To integrate it into your iOS project:

For this project, we will use this opensource repository:

GitHub - sooryaraj/flutter_openvpn

Contribute to sooryaraj/flutter_openvpn development by creating an account on GitHub.

github.com

 

Add this to your package’s pubspec.yaml file:

dependencies:
  flutter_openvpn: ^0.2.0

1. Install it You can install packages from the command line:

flutter pub get

Import it Now in your Dart code, you can use:

import 'package:flutter_openvpn/flutter_openvpn.dart';

Supported Platforms

• 22 >= Android
• 9.0 >= iOS

Build project first

• After adding the package to pubspec.yaml, Run the build command

flutter build apk --debug //for android
flutter build ios --no-codesign //for ios

Ignore any build errors.

Android integration

• Change minimum sdk to 22 :

1. Open Your project in Android Studio.
2. Open your MainActivity.java(or .kt for kotlin) file (Located in android/app/src/main/YOUR_PACKAGE_NAME/MainActivity)
3. Override onActivityResult in your activity and add this code to function body

if (requestCode == 1) {
    if (resultCode == RESULT_OK) {
        FlutterOpenvpnPlugin.setPermission(true);
    } else {
        FlutterOpenvpnPlugin.setPermission(false);
    }
}

1. Finally import FlutterOpenVpn with this import statement

import com.topfreelancerdeveloper.flutter_openvpn.FlutterOpenvpnPlugin;

iOS integration

• Add VPN Entitlements

1. Open ios/Runner.xcworkspace in xcode
2. In Runner target -> Signing & Capabilities -> Click on “+ Capability” button
3. Add both “Network Extension” and “App Groups” capabilities
4. Select ONLY “Packet Tunnel” form newly created Network Extension menu.
5. Make sure your Bundle identifier is checked in App Groups.
6. View This Screenshot for visual Guide

 

• Add Network Extension Target

1. Below the Runner target click on “+” button to add a new target
2. Search for “Network Extension” in the newly opened page and click on next
3. Give it a name(Without space) and make sure to select Swift as the Language and Packet Tunnel as the Provider Type.
4. Click on finish and agree to any message relating to “Activating Extension”
5. Repeat “Add VPN Entitlements” for the newly created target as well
6. View This Screenshot for Visual Guide

 

• Change minimum platform target to iOS 9.0 :

1. In Runner target -> Deployment Info -> change Target to iOS 9.0
2. Repeat step 2 for your VPN Extension Target as well

• Add OpenVPNAdapter dependency to PodFile

1. Open ios/PodFile
2. Change your PodFile according to this:

target 'Runner' do
  use_frameworks!
  use_modular_headers!

  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
end

//Add this part
target 'YOUR_TARGET_EXTENSION_NAME' do
  use_frameworks!
  use_modular_headers!
  pod 'OpenVPNAdapter', :git => 'https://github.com/ss-abramchuk/OpenVPNAdapter.git', :tag => '0.7.0'
end

1. Run ‘pod install’ command in /ios directory

• Disable Bitcode

1. In Vpn Extension Target -> Build Settings
2. Search for “Bitcode” and set it to NO

• Add code to PacketTunnelProvider

1. Open VPNExtension folder/PacketTunnelProvider.swift in xcode.
2. Replace all code with this and save

Dart/Flutter integration

• Initilize plugin

FlutterOpenvpn.init(
          localizedDescription: "ExampleVPN", //this is required only on iOS
          providerBundleIdentifier: "com.topfreelancerdeveloper.flutterOpenvpnExample.RunnerExtension",//this is required only on iOS
   //localizedDescription is the name of your VPN profile
   //providerBundleIdentifier is the bundle id of your vpn extension
)
/* returns {"currentStatus" : "VPN_CURRENT_STATUS",
    "expireAt" : "VPN_EXPIRE_DATE_STRING_IN_FORMAT(yyyy-MM-dd HH:mm:ss)",} if successful
 returns null if failed
*/

View this for more info on VPN status Strings

• Add VPN Profile and connect

FlutterOpenvpn.lunchVpn(
          ovpnFileContent, //content of your .ovpn file
          (isProfileLoaded) => print('isProfileLoaded : $isProfileLoaded'),
          (newVpnStatus) => print('vpnActivated : $newVpnStatus'),
          expireAt: DateTime.now().add(Duration(seconds: 30)),
   //(Optional) VPN automatically disconnects in next 30 seconds
         )

We have tried this source code from code canyon, it worked well for both Android and ios: https://codecanyon.net/item/dbug-vpn-flutter-vpn-unlimited-proxy-laravel-admin-android-ios-cross-platform/50397501

If you like this article please clap it will inspire.