Getting Started

Complete guide to Axe VPN admin panel and mobile application

Contents

Flutter App - Getting Started

Flutter Development Setup

Complete guide to set up your development environment and get the Axe VPN Flutter app running on your local machine. Follow these steps to start developing and customizing the mobile application.

Table of Contents

Prerequisites

System Requirements
Windows
  • • Windows 10 (64-bit) or later
  • • Minimum 8 GB RAM
  • • 10 GB free disk space
  • • Git for Windows
macOS
  • • macOS 10.14 (Mojave) or later
  • • Xcode 12.0 or later
  • • CocoaPods installed
  • • Command Line Tools
Development Devices
Android
  • • Android device (API level 21+)
  • • USB debugging enabled
  • • Android Studio installed
  • • Android SDK configured
iOS (macOS only)
  • • iOS device or simulator
  • • iOS 11.0 or later
  • • Apple Developer account
  • • Xcode with iOS SDK

Flutter SDK Setup

1. Download Flutter SDK

Download the latest stable Flutter SDK from the official website:

Windows macOS Linux

2. Install Flutter SDK

  1. Extract the downloaded ZIP file to a location like C:\flutter
  2. Add Flutter to your PATH environment variable:
# Add to your PATH environment variable C:\flutter\bin
  1. Open a new command prompt and verify installation:
flutter --version flutter doctor

  1. Extract the downloaded file to your desired location:
cd ~/development unzip ~/Downloads/flutter_macos_*-stable.zip
  1. Add Flutter to your PATH by editing your shell profile:
# Add to ~/.zshrc or ~/.bash_profile export PATH="$PATH:`pwd`/flutter/bin"
  1. Reload your shell and verify installation:
source ~/.zshrc # or source ~/.bash_profile flutter --version flutter doctor

3. Run Flutter Doctor

Flutter Doctor checks your environment and displays a report of the status of your Flutter installation:

flutter doctor
Flutter Doctor Output

This command checks your environment and displays a report. Follow any recommendations to install missing dependencies.

Development Tools

IDE Setup

VS Code (Recommended)
  1. Install Visual Studio Code
  2. Install Flutter extension:
Extensions → Search "Flutter" → Install

The Flutter extension automatically installs the Dart extension.

Android Studio
  1. Install Android Studio
  2. Install Flutter and Dart plugins:
File → Settings → Plugins → Search "Flutter" → Install → Restart

Required for Android development and emulator.

Android Development Setup

Android SDK Requirements

Android Studio installation includes Android SDK. Ensure you have the latest SDK tools and platform tools installed.

  1. Open Android Studio and navigate to SDK Manager
  2. Install the required SDK components:
SDK Platforms: - Android 13 (API Level 33) - Android 12 (API Level 31) - Android 11 (API Level 30) SDK Tools: - Android SDK Build-Tools - Android SDK Platform-Tools - Android SDK Tools - Android Emulator
  1. Accept Android licenses:
flutter doctor --android-licenses

iOS Development Setup (macOS only)

  1. Install Xcode from the Mac App Store
  2. Install Xcode command-line tools:
sudo xcode-select --install
  1. Install CocoaPods:
sudo gem install cocoapods
  1. Agree to Xcode license:
sudo xcodebuild -license accept

Project Setup

1. Clone the Repository

Clone the Axe VPN Flutter app repository to your local machine:

# Clone the repository git clone https://github.com/your-username/axevpn-flutter.git # Navigate to the project directory cd axevpn-flutter # Switch to the development branch (if applicable) git checkout develop

2. Install Dependencies

Install the required Flutter packages and dependencies:

# Get Flutter packages flutter pub get # For iOS, install CocoaPods dependencies cd ios pod install cd ..

3. Project Structure Overview

Core Directories
lib/ ├── main.dart # App entry point ├── config/ # App configuration ├── models/ # Data models ├── services/ # API and VPN services ├── providers/ # State management ├── screens/ # UI screens ├── widgets/ # Reusable components └── utils/ # Helper functions
Platform Directories
android/ # Android specific code ├── app/ │ ├── src/main/ │ └── build.gradle ios/ # iOS specific code ├── Runner/ ├── Runner.xcodeproj/ └── Podfile

Configuration

1. API Configuration

Configure the backend API endpoints in the app configuration:

// lib/config/api_config.dart class ApiConfig { static const String baseUrl = 'http://127.0.0.1:8000/api'; static const String socketUrl = 'ws://127.0.0.1:8000'; // API Endpoints static const String loginEndpoint = '/auth/login'; static const String serversEndpoint = '/servers'; static const String userEndpoint = '/user'; static const String subscriptionEndpoint = '/subscription'; }

2. Firebase Configuration

Set up Firebase for push notifications:

  1. Create a new Firebase project at Firebase Console
  2. Add Android and iOS apps to your Firebase project
  3. Download configuration files:
Android Configuration
  1. Download google-services.json
  2. Place it in android/app/ directory
  3. Ensure package name matches your app
iOS Configuration
  1. Download GoogleService-Info.plist
  2. Add it to iOS project in Xcode
  3. Ensure bundle ID matches your app

3. VPN Configuration

Configure OpenVPN settings for your app:

// lib/config/vpn_config.dart class VpnConfig { static const String defaultProtocol = 'UDP'; static const int defaultPort = 1194; static const String defaultCipher = 'AES-256-CBC'; static const String defaultAuth = 'SHA256'; // Connection timeouts static const int connectTimeout = 30; // seconds static const int reconnectAttempts = 3; static const int reconnectDelay = 5; // seconds }

First Run

1. Device/Emulator Setup

Android Device
  1. Enable Developer Options on your device
  2. Enable USB Debugging
  3. Connect device via USB
  4. Verify device is detected:
flutter devices adb devices
Android Emulator
  1. Open Android Studio
  2. Go to AVD Manager
  3. Create a new virtual device
  4. Start the emulator
# List available emulators flutter emulators # Start specific emulator flutter emulators --launch <emulator_id>

2. Run the App

Now you're ready to run the Axe VPN app:

# Run in debug mode flutter run # Run in release mode flutter run --release # Run on specific device flutter run -d <device_id> # Run with hot reload enabled (default in debug) flutter run --hot

3. Verify App Functionality

Initial Testing Checklist
  • ✓ App launches without errors
  • ✓ Login/registration screens load
  • ✓ Server list displays (may be empty initially)
  • ✓ Navigation between screens works
  • ✓ API connection is established
  • ✓ No console errors or warnings

Troubleshooting

Common Issues and Solutions

Solution Steps:
  1. Run flutter doctor -v for detailed information
  2. Install missing dependencies as recommended
  3. Update Android SDK tools if needed
  4. Accept Android licenses: flutter doctor --android-licenses
  5. For iOS: Install Xcode and command line tools

Common Solutions:
  • Clean and rebuild:
    flutter clean flutter pub get flutter run
  • Android build issues: Check Android SDK configuration
  • iOS build issues: Run pod install in ios/ directory
  • Dependency conflicts: Update pubspec.yaml versions

Troubleshooting Steps:
  1. Check USB connection and cable
  2. Enable USB debugging on Android device
  3. Install device drivers (Windows)
  4. Verify device authorization
  5. Restart ADB: adb kill-server && adb start-server

Check These Items:
  • Verify backend server is running (127.0.0.1:8000)
  • Check API endpoint URLs in configuration
  • Ensure CORS is properly configured on backend
  • Test API endpoints with Postman or curl
  • Check network connectivity on device/emulator
Next Steps

Great! You have the Flutter app running. Here's what to explore next:

App Architecture VPN Integration UI Customization