ByteNoteByteNote
字

字节笔记本

2026年2月22日

EtornamVpnFlutter：Flutter VPN 应用 UI 实现项目

#Flutter 专栏

本文介绍 EtornamVpnFlutter，一个使用 Flutter 开发的 VPN 应用 UI 实现项目。该项目展示了如何构建一个具有服务器列表选择功能的跨平台 VPN 客户端界面，包含免费和付费服务器的分类展示。

项目简介

EtornamVpnFlutter 是一个开源的 Flutter VPN 应用 UI 实现项目，由 Etornam Sunu 开发维护。截至目前，该项目在 GitHub 上已获得 161 stars 和 54 forks，主要使用 Dart 语言编写。项目提供了完整的 VPN 服务器列表选择界面实现，支持展示不同国家的服务器节点。

核心特性

  • 服务器列表展示：支持展示多个国家的 VPN 服务器节点
  • 分类管理：区分免费服务器和付费服务器，UI 上通过锁图标标识付费服务器
  • 国旗图标：使用圆形头像展示各国国旗，直观识别服务器位置
  • 服务器选择：通过勾选框实现服务器单选功能
  • 跨平台支持：基于 Flutter 框架，可同时构建 Android 和 iOS 应用
  • 主题适配：支持跟随系统主题变化

技术栈

  • Flutter：Google 开源的跨平台 UI 框架
  • Dart：Flutter 的开发语言
  • roundcheckbox：圆形勾选框组件库
  • Material Design：遵循 Material Design 设计规范

核心代码解析

Server 数据模型

dart
class Server {
  String? flag;
  String? name;
  String? domain;
  String? username;
  String? password;
  int? port;
  int? mtu;

  Server({this.flag, this.name, this.domain, this.username, this.password, this.port, this.mtu});
}

服务器列表页面实现

server_list_page.dart 文件实现了服务器选择页面的核心功能：

1. 服务器数据定义

页面中定义了两组服务器列表：

  • premiumServers：付费服务器列表（包含英国、美国、加拿大、法国、加纳等节点）
  • freeServers：免费服务器列表（包含英国、法国、加纳等节点）

2. 页面布局结构

dart
@override
Widget build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async {
      Navigator.of(context).pop(server);
      return true;
    },
    child: Scaffold(
      appBar: AppBar(
        title: Text('Servers'),
      ),
      body: ListView(...),
    ),
  );
}

3. 付费服务器列表展示

使用 ServerItemWidget 组件展示付费服务器，通过 isFaded: true 和 icon: Icons.lock 标识为锁定状态：

dart
ListView.separated(
  shrinkWrap: true,
  itemCount: premiumServers.length,
  itemBuilder: (_, index) {
    return ServerItemWidget(
      isFaded: true,
      label: premiumServers[index].name!,
      icon: Icons.lock,
      flagAsset: premiumServers[index].flag!,
      onTap: () {
        setState(() {
          server = premiumServers[index];
        });
      }
    );
  },
  separatorBuilder: (_, index) => SizedBox(height: 10),
)

4. 免费服务器列表展示

免费服务器使用自定义布局，包含国旗、国家名称和勾选框：

dart
Material(
  borderRadius: BorderRadius.circular(10),
  color: Theme.of(context).cardColor,
  child: Padding(
    padding: const EdgeInsets.all(7.0),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Wrap(
          crossAxisAlignment: WrapCrossAlignment.center,
          children: [
            CircleAvatar(
              radius: 15,
              backgroundColor: Colors.white,
              backgroundImage: ExactAssetImage(freeServers[index].flag!),
            ),
            SizedBox(width: 15),
            Text(freeServers[index].name!),
          ],
        ),
        RoundCheckBox(
          size: 24,
          isChecked: freeServers[index] == server,
          onTap: (x) {
            setState(() {
              server = freeServers[index];
            });
          },
        ),
      ],
    ),
  ),
)

安装指南

前置要求

  • Flutter SDK
  • Android Studio / VSCode / IntelliJ IDE
  • Android SDK（开发 Android 应用）
  • macOS + Xcode（开发 iOS 应用）

安装步骤

bash
# 克隆项目
git clone https://github.com/iamEtornam/EtornamVpnFlutter.git

# 进入项目目录
cd EtornamVpnFlutter

# 安装依赖
flutter pub get

# 运行应用
flutter run

构建发布版本

bash
# Android
flutter build apk
flutter build appbundle

# iOS
flutter build ios

项目结构

text
lib/
├── screens/
│   ├── server_list_page.dart      # 服务器列表页面
│   └── shared_widgets/
│       └── server_list_widget.dart # 服务器列表组件
├── main.dart                       # 应用入口
└── ...

使用建议

  1. 服务器配置：修改 server_list_page.dart 中的 premiumServers 和 freeServers 列表来配置实际的服务器节点
  2. 国旗资源：将国旗图片放入 assets/ 目录并在 pubspec.yaml 中声明
  3. VPN 功能集成：此项目仅提供 UI 实现，需要额外集成 VPN 连接功能（如使用 flutter_vpn 等插件）

项目链接

Flutter 专栏
上一篇

flutter_desktop_notes_app：Flutter 跨平台桌面笔记应用

下一篇

EtornamVpnFlutter：Flutter VPN 应用 UI 实现项目

分享: