Wex VPN 🌐✨

A modern, highly polished, fully animated, and interactive VPN Dashboard UI built in Flutter. This project is optimized for performance, scalability, and absolute codebase cleanliness. It uses native vector elements and has zero complex assets, making it exceptionally fast to load.

---

📸 Screenshots & Design Highlights

Home screen	Server Location Selector	Settings & Protocols

• Premium Dark Midnight Aesthetics: Custom-tailored radial and linear gradients (#021B3A theme) with clean neon accents.
• Concentric Pulse Animations: The power button animates dynamically to represent connection states (disconnected, connecting, and connected) using custom radial pulse waves.
• Cradle-Shaped Header Curve: Custom clipped bezier curve path nesting the connect button exactly on the curve center.
• High-Resolution Vector Flags: Utilizes ISO 2-letter flag code mappings rendering native regional indicator flag emojis for instant loading and crisp resolution.
• Dynamic Speed Counters: Active upload and download counters simulating realistic traffic values on a live connection.
• Sleek Bottom Control Cards: Premium glassmorphic shortcuts for VIP Subscription and settings.

---

🛠️ Key Features

1. Animated Connect Button: Double-layer expanding pulse ripples with smooth icon state transitions.
2. Server Location Selector: Sleek draggable modal bottom sheet supporting real-time country/city search filtering, latency ping badges (Green/Orange/Red), and instant connection switching.
3. VIP Subscription Dialog: Gorgeous glassmorphic upgrade modal featuring perks comparison and a monthly/yearly billing card toggle.
4. Tuning Settings & Protocols: Comprehensive bottom configuration sheet supporting protocol selection (WireGuard®, OpenVPN UDP/TCP, IKEv2) and active switches for Kill Switch, Auto-Connect, and Split Tunneling.

---

📁 Project Directory Structure

lib/
├── custom_clipper.dart     # Bezier path clipper for header cradle curve
├── main.dart               # Entry point, dashboard builder, state machine & timers
├── models/
│   └── vpn_server.dart     # Server model mapping flag emojis to country codes
├── utils/
│   └── constants.dart      # Curated UI colors, gradients, and refined typography
└── widgets/
    ├── premium_dialog.dart  # Upgrade to VIP premium modal
    ├── pulse_button.dart    # Animated power button with expanding glow waves
    ├── server_select_sheet.dart  # Draggable server picker with search filter
    └── settings_sheet.dart  # Security settings and protocol selection

---

🚀 Getting Started

Prerequisites

• Flutter SDK (version ^3.12.0 or higher)
• Dart SDK (version ^3.0.0 or higher)

Setup & Run

1. Clone the repository:

   git clone https://github.com/Wex-DE/VPN.git
   cd vpn

2. Fetch package dependencies:

   flutter pub get

3. Run the application:

   flutter run

---

🔒 Code Cleanliness & Safety

• No Sensitive Credentials: Zero hardcoded passwords, tokens, private keys, or tracking endpoints.
• Pure Vector Icons & Flags: Avoids raster images and raster assets to keep the bundle size extremely lightweight and fully secure.
• Clean Separation of Concerns: Modular models, widgets, and constants to make public review easy and welcoming.