ShordVPN Tutorial

Introduction

SherdVPN is a Flutter-based VPN application that uses V2Ray as its core VPN protocol. This app allows users to manage VPN configurations, connect to various servers, and monitor their VPN usage.

Features

Connect/disconnect VPN
Import and manage V2Ray configurations
View and select from a list of servers
Monitor network stats (download/upload speeds, total data used)
View connection logs
Check server delay

Technologies/Packages Used

Flutter Framework
Provider-package
flutter_v2ray-package
flutter_local_notifications-package
permission_handler-package
shared_preferences-package
intl-package
country_flags-package
device_info_plus-package
network_info_plus-package

Project Structure

lib/
├── main.dart
├── app.dart
├── app_state.dart
├── theme.dart
└── screens/
    ├── home_screen.dart
    ├── configs_screen.dart
    ├── servers_screen.dart
    └── logs_screen.dart

Main Components

main.dart: The entry point of the application. It initializes the app state, sets up notifications, and runs the app.
app.dart: Defines the main app widget and navigation structure.
app_state.dart: Manages the global state of the application using the Provider package. It handles VPN connections, configuration management, and logging.
theme.dart: Defines the app's theme, including colors and text styles.
screens/: Contains individual screen widgets for different sections of the app:
- home_screen.dart: The main screen with the connection button and network stats.
- configs_screen.dart: Manages V2Ray configurations.
- servers_screen.dart: Displays a list of available servers.
- logs_screen.dart: Shows connection logs and device information.

Building and Running the App

Ensure you have Flutter installed and set up on your development machine.
Get the dependencies:
```
flutter pub get
```
Run the app:
```
flutter run
```

Note: This app requires Android SDK version 21 or higher. Make sure your Android device or emulator meets this requirement.

Permissions

The app requires the following permissions:

VPN service: To establish VPN connections
Notification: To show status notifications

These permissions are requested at runtime using the permission_handler package.

Customization

You can customize the app's appearance by modifying the theme.dart file. Server lists and other static data can be updated in their respective files (e.g., servers_screen.dart).

Changing App Name

Open android/app/src/main/AndroidManifest.xml and update the android:label attribute in the application tag.
Open ios/Runner/Info.plist and update the CFBundleName key.
Update the title in the MaterialApp widget in lib/app.dart.

Changing App ID (Package Name / Bundle Identifier)

For Android:

Open android/app/build.gradle and update the applicationId.
Refactor the package structure in android/app/src/main/kotlin/.
Update the package name in android/app/src/main/AndroidManifest.xml.

For iOS:

Open your project in Xcode.
Select the Runner target and change the Bundle Identifier.

Alternatively, you can use the rename package:

flutter pub global activate rename
flutter pub global run rename --bundleId com.yourcompany.yourappname

Signing the App

Android

Create a keystore:

keytool -genkey -v -keystore ~/upload-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias upload

Create a file named [project]/android/key.properties with the following content:

storePassword=<password from previous step>
keyPassword=<password from previous step>
keyAlias=upload
storeFile=<path to the keystore file, e.g., /Users/<user name>/upload-keystore.jks>

Update android/app/build.gradle to use the keystore:

def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}

android {
  ...
  signingConfigs {
      release {
          keyAlias keystoreProperties['keyAlias']
          keyPassword keystoreProperties['keyPassword']
          storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
          storePassword keystoreProperties['storePassword']
      }
  }
  buildTypes {
      release {
          signingConfig signingConfigs.release
      }
  }
}

iOS

In Xcode, go to Runner > Signing & Capabilities
Ensure your Apple Developer account is added in Xcode
Select the appropriate team and let Xcode manage the provisioning profile

Releasing the App

Google Play Store

Build a release APK or App Bundle:
```
flutter build appbundle
```
Create a Google Play Developer account if you haven't already
Create a new application in the Google Play Console
Fill in the store listing details, including graphics, descriptions, and screenshots
Upload the App Bundle in the "App releases" section
Set up pricing and distribution
Submit the app for review

Apple App Store

Build a release IPA:
```
flutter build ipa
```
Create an Apple Developer account if you haven't already
Create an app record in App Store Connect
Use Xcode or Application Loader to upload the IPA
In App Store Connect, fill in all required metadata, screenshots, and app information
Submit the app for review

Important Note

Remember to comply with both Google's and Apple's developer policies and guidelines when submitting your app. VPN apps often require additional documentation or may be subject to extra scrutiny, so be prepared to provide any necessary information about your VPN service and data handling practices.