目录

Windows 下使用 Flutter 进行混合开发环境搭建

🎯 概述

Flutter 是 Google 推出的跨平台 UI 框架，可以构建 Android、iOS、Web、桌面等多个平台的应用。在 Windows 上主要支持 Android 和 Web 开发。

一、系统要求与准备

硬件要求

组件 最低要求 推荐配置
操作系统 Windows 10 (64位) Windows 11 22H2
内存 8 GB 16 GB+
存储 40 GB 可用空间 SSD，100 GB+
磁盘格式 NTFS NTFS
分辨率 1280×800 1920×1080+

软件要求

# 1. PowerShell 5.0+（预装）
# 检查版本
$PSVersionTable.PSVersion

# 2. Git for Windows（必需）
# 下载：https://git-scm.com/download/win

# 3. 启用开发者模式（可选）
# 设置 → 更新和安全 → 开发者选项 → 开发人员模式

二、Flutter SDK 安装

方法一：官方安装（推荐）

# 1. 下载 Flutter SDK
# https://flutter.dev/docs/get-started/install/windows

# 2. 解压到自定义目录（避免中文路径）
# 例如：C:\src\flutter

# 3. 添加环境变量
setx PATH "%PATH%;C:\src\flutter\bin"

# 4. 验证安装
flutter --version

方法二：使用包管理器（可选）

# 1. 使用 Chocolatey（包管理器）
choco install flutter

# 2. 使用 Scoop
scoop bucket add extras
scoop install flutter

方法三：手动下载 + 镜像加速

# 国内用户镜像加速
# 1. 设置环境变量
setx PUB_HOSTED_URL https://pub.flutter-io.cn
setx FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn

# 2. 从镜像下载
# https://flutter.cn/docs/get-started/install/windows

三、Android 开发环境

1. 安装 Android Studio

# 下载：https://developer.android.com/studio
# 版本：最新稳定版

# 安装组件（必需）：
☑️ Android Studio
☑️ Android SDK
☑️ Android Virtual Device
☑️ Performance (Intel® HAXM)

2. Android SDK 配置

# 1. 打开 Android Studio
# 首次运行会自动安装 Android SDK

# 2. 配置环境变量
setx ANDROID_HOME "C:\Users\%USERNAME%\AppData\Local\Android\Sdk"
setx PATH "%PATH%;%ANDROID_HOME%\platform-tools"
setx PATH "%PATH%;%ANDROID_HOME%\tools"
setx PATH "%PATH%;%ANDROID_HOME%\emulator"

# 3. 安装必要的 SDK 包
flutter doctor --android-licenses

3. 安装必要的 SDK 组件

# 通过 Android Studio 安装：
1. 打开 Android Studio
2. 打开 SDK Manager（工具 → SDK Manager）
3. 安装：
   - Android SDK Platform 33（最新稳定版）
   - Android SDK Build-Tools 33.0.0+
   - Android Emulator
   - Android SDK Platform-Tools
   - Intel x86 Emulator Accelerator (HAXM installer)

# 或使用命令行（推荐）：
flutter doctor
# 按照提示安装缺失的组件

四、VSCode 配置（推荐编辑器）

1. 安装 VSCode

# 下载：https://code.visualstudio.com/
# 版本：最新稳定版

2. Flutter 插件安装

VSCode 扩展商店安装：
1. Dart（由 Dart Code 提供）
2. Flutter（由 Dart Code 提供）
3. Awesome Flutter Snippets
4. Flutter Widget Snippets
5. Pubspec Assist

安装步骤：
- 打开 VSCode
- 扩展面板（Ctrl+Shift+X）
- 搜索并安装上述插件

3. VSCode 配置

// settings.json
{
  // Flutter 相关
  "dart.lineLength": 80,
  "dart.flutterSdkPath": "C:\\src\\flutter",
  "dart.debugExternalPackageLibraries": true,
  "dart.debugSdkLibraries": true,
  
  // 保存时格式化
  "editor.formatOnSave": true,
  "[dart]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "Dart-Code.dart-code"
  },
  
  // 代码提示
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  
  // 终端设置
  "terminal.integrated.shell.windows": "C:\\Windows\\System32\\cmd.exe",
  "terminal.integrated.env.windows": {
    "PUB_HOSTED_URL": "https://pub.flutter-io.cn",
    "FLUTTER_STORAGE_BASE_URL": "https://storage.flutter-io.cn"
  }
}

五、模拟器配置

1. 创建 Android 模拟器

# 方法1：通过 Android Studio
1. 打开 Android Studio
2. 工具 → AVD Manager
3. 点击"Create Virtual Device"
4. 选择设备（推荐 Pixel 5）
5. 选择系统镜像（推荐 API 33，x86_64）
6. 配置：RAM 2048MB，Storage 2048MB

# 方法2：命令行创建
flutter emulators --create [--name xyz]

2. 启动模拟器

# 查看可用模拟器
flutter emulators

# 启动指定模拟器
flutter emulators --launch Pixel_5_API_33

# 或使用 adb 命令
emulator -avd Pixel_5_API_33 -gpu host

# 在 VSCode 中启动
Ctrl+Shift+P → "Flutter: Launch Emulator"

3. 性能优化配置

# 编辑模拟器配置文件
# C:\Users\<用户名>\.android\avd\Pixel_5_API_33.avd\config.ini

hw.ramSize=4096
hw.gpu.enabled=yes
hw.gpu.mode=host
hw.keyboard=yes
hw.sdCard=yes
disk.dataPartition.size=4G
hw.lcd.density=440
hw.lcd.height=1920
hw.lcd.width=1080

六、环境验证

1. 运行 flutter doctor

# 检查环境完整性
flutter doctor

# 期望输出（全部通过）：
[✓] Flutter (Channel stable, 3.10.x, on Windows 10 ...)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[✓] Chrome - develop for the web
[✓] Visual Studio - develop for Windows (Desktop)
[✓] Android Studio (version 2022.1)
[✓] VS Code (version 1.80.x)
[✓] Connected device (2 available)
[✓] Network resources

2. 常见问题解决

# 问题1：Android licenses not accepted
flutter doctor --android-licenses
# 全部输入 y 接受

# 问题2：HAXM not installed
# 下载安装：https://github.com/intel/haxm/releases
# 或使用 Windows Hypervisor Platform

# 问题3：No connected devices
# 检查模拟器是否启动
# 检查 USB 调试是否开启（真机）
adb devices

七、创建第一个 Flutter 项目

1. 项目创建

# 创建新项目
flutter create my_app

# 带描述创建
flutter create --org com.example --project-name my_app --description "My first Flutter app" my_app

# 指定平台
flutter create --platforms=android,web,windows my_app

# 进入项目
cd my_app

2. 项目结构

my_app/
├── android/                 # Android 平台代码
├── ios/                    # iOS 平台代码（Mac 需要）
├── web/                    # Web 平台代码
├── windows/                # Windows 桌面代码
├── lib/                    # 主要代码目录
│   └── main.dart          # 应用入口
├── test/                   # 测试文件
├── pubspec.yaml           # 项目配置和依赖
├── analysis_options.yaml  # 代码分析配置
└── README.md

3. 运行应用

# 运行到 Android 模拟器
flutter run

# 运行到 Chrome（Web）
flutter run -d chrome

# 运行到连接的 Android 设备
flutter run -d <device_id>

# 调试模式运行
flutter run --debug

# 发布模式运行
flutter run --release

# VSCode 中运行：F5 或 Ctrl+F5

八、依赖管理

1. pubspec.yaml 配置

name: my_app
description: A new Flutter project.
publish_to: 'none' # 不上传到 pub.dev
version: 1.0.0+1

environment:
  sdk: ">=2.19.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  # UI 框架
  cupertino_icons: ^1.0.2
  # 状态管理
  provider: ^6.0.0
  # 路由
  go_router: ^6.0.0
  # HTTP 请求
  dio: ^5.0.0
  # 本地存储
  shared_preferences: ^2.0.0
  # 设备信息
  device_info_plus: ^8.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true
  assets:
    - assets/images/
    - assets/icons/

2. 包管理命令

# 获取依赖
flutter pub get

# 添加依赖
flutter pub add package_name

# 升级依赖
flutter pub upgrade

# 检查过时依赖
flutter pub outdated

# 清理缓存
flutter pub cache repair

九、状态管理和架构

1. 推荐架构：Provider + MVVM

// lib/providers/counter_provider.dart
import 'package:flutter/foundation.dart';

class CounterProvider extends ChangeNotifier {
  int _count = 0;
  
  int get count => _count;
  
  void increment() {
    _count++;
    notifyListeners();
  }
  
  void decrement() {
    _count--;
    notifyListeners();
  }
}

// lib/main.dart
void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => CounterProvider()),
      ],
      child: MyApp(),
    ),
  );
}

2. 状态管理方案对比

方案 适合场景 学习曲线 性能
Provider 简单应用，初学者 低 良好
Riverpod 大型应用，推荐 中 优秀
Bloc/Cubit 企业级应用 高 优秀
GetX 快速开发 低 良好
MobX 响应式编程 中 良好

十、平台通道（Platform Channels）

1. 混合开发架构

Flutter UI
    ↓
Method Channel / Event Channel
    ↓
Platform-Specific Code (Android/iOS)
    ↓
Native APIs / SDKs

2. Android 平台通道示例

// Flutter 端
import 'package:flutter/services.dart';

class NativeMethods {
  static const platform = MethodChannel('com.example/native');
  
  static Future<String> getBatteryLevel() async {
    try {
      final result = await platform.invokeMethod('getBatteryLevel');
      return 'Battery level: $result%';
    } on PlatformException catch (e) {
      return "Failed: '${e.message}'.";
    }
  }
}

// Android 端 (android/app/src/main/kotlin/.../MainActivity.kt)
import androidx.annotation.NonNull
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel

class MainActivity: FlutterActivity() {
  private val CHANNEL = "com.example/native"
  
  override fun configureFlutterEngine(@NonNull flutterEngine: FlutterEngine) {
    super.configureFlutterEngine(flutterEngine)
    
    MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL).setMethodCallHandler {
      call, result ->
      if (call.method == "getBatteryLevel") {
        val batteryLevel = getBatteryLevel()
        result.success(batteryLevel)
      } else {
        result.notImplemented()
      }
    }
  }
  
  private fun getBatteryLevel(): Int {
    // 实现获取电池电量的原生代码
    return 85
  }
}

十一、调试与性能分析

1. 调试工具

# 常用调试命令
flutter analyze          # 代码分析
flutter test            # 运行测试
flutter run --profile   # 性能分析模式
flutter run --release   # 发布模式

# DevTools
flutter pub global activate devtools
flutter pub global run devtools
# 或直接在 VSCode 中打开 DevTools

2. VSCode 调试配置

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Flutter",
      "request": "launch",
      "type": "dart",
      "program": "lib/main.dart",
      "args": [
        "--dart-define=ENV=dev"
      ]
    },
    {
      "name": "Flutter (Profile Mode)",
      "request": "launch",
      "type": "dart",
      "program": "lib/main.dart",
      "flutterMode": "profile"
    },
    {
      "name": "Flutter (Web)",
      "request": "launch",
      "type": "dart",
      "program": "lib/main.dart",
      "deviceId": "chrome"
    }
  ]
}

3. 性能优化

// 1. 使用 const 构造函数
Widget build(BuildContext context) {
  return const MyWidget(); // 避免重建
}

// 2. 使用 keys
ListView.builder(
  itemBuilder: (context, index) => MyItem(
    key: ValueKey(items[index].id), // 优化列表性能
  ),
)

// 3. 避免重建
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

// 4. 使用 AutomaticKeepAliveClientMixin
class _MyTabState extends State<MyTab> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;
}

十二、构建与发布

1. 构建 Android APK

# 调试版本
flutter build apk --debug

# 发布版本
flutter build apk --release

# 分离架构（减小包体积）
flutter build apk --split-per-abi

# 构建 App Bundle（上传到 Play Store）
flutter build appbundle

2. 构建配置

# android/app/build.gradle
android {
    compileSdkVersion 33
    
    defaultConfig {
        applicationId "com.example.myapp"
        minSdkVersion 21
        targetSdkVersion 33
        versionCode 1
        versionName "1.0.0"
        multiDexEnabled true
    }
    
    signingConfigs {
        release {
            storeFile file("keystore.jks")
            storePassword "password"
            keyAlias "key"
            keyPassword "password"
        }
    }
    
    buildTypes {
        release {
            signingConfig signingConfigs.release
            minifyEnabled true
            shrinkResources true
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

3. 生成密钥库

# 生成密钥库
keytool -genkey -v -keystore keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

# 位置：android/app/keystore.jks

十三、网络与镜像配置（国内用户）

1. 镜像源配置

# 永久设置环境变量
setx PUB_HOSTED_URL https://pub.flutter-io.cn
setx FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn

# 临时设置
$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"

2. Android SDK 镜像

# 创建配置文件
# C:\Users\<用户名>\.android\repositories.cfg

# 使用清华镜像
## 无法直接配置，建议使用代理

3. Git 镜像

# 设置 Git 代理（如果需要）
git config --global http.proxy http://127.0.0.1:1080
git config --global https.proxy https://127.0.0.1:1080

十四、扩展开发能力

1. Flutter 与原生混合

// 使用 platform_interface 创建插件
// 1. 创建接口包
// 2. 创建平台实现（android/、ios/）
// 3. 在 Flutter 中调用

2. 集成现有原生模块

步骤：
1. 在 android/app/build.gradle 中添加依赖
2. 通过 MethodChannel 调用原生功能
3. 处理数据序列化/反序列化
4. 错误处理

3. 常用插件推荐

UI 相关：
- flutter_screenutil: 屏幕适配
- cached_network_image: 网络图片缓存
- flutter_svg: SVG 支持
- photo_view: 图片预览

功能相关：
- url_launcher: 打开 URL
- image_picker: 图片选择
- shared_preferences: 本地存储
- permission_handler: 权限管理
- connectivity_plus: 网络状态
- geolocator: 地理位置
- camera: 相机
- sqflite: SQLite 数据库

十五、CI/CD 集成

1. GitHub Actions 配置

# .github/workflows/flutter.yml
name: Flutter CI/CD

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    
    steps:
    - uses: actions/checkout@v3
    
    - uses: subosito/flutter-action@v2
      with:
        flutter-version: '3.10.x'
        channel: 'stable'
    
    - run: flutter pub get
    - run: flutter analyze
    - run: flutter test
    - run: flutter build apk --release --split-per-abi
    
    - name: Upload APK
      uses: actions/upload-artifact@v3
      with:
        name: app-release
        path: build/app/outputs/flutter-apk/*.apk

2. 自动化测试

// 单元测试
void main() {
  test('Counter increments', () {
    final counter = Counter();
    counter.increment();
    expect(counter.value, 1);
  });
}

// 集成测试
import 'package:flutter_test/flutter_test.dart';
import 'package:my_app/main.dart';

void main() {
  testWidgets('Counter increments', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());
    expect(find.text('0'), findsOneWidget);
    await tester.tap(find.byIcon(Icons.add));
    await tester.pump();
    expect(find.text('1'), findsOneWidget);
  });
}

十六、常见问题解决

问题1：Flutter doctor 显示红叉

# 检查 Android Studio 插件
# Android Studio → 插件 → 搜索 Flutter → 安装

# 检查许可证
flutter doctor --android-licenses

# 重启电脑

问题2：模拟器启动失败

# 启用虚拟化技术
1. 进入 BIOS/UEFI
2. 启用 Intel VT-x 或 AMD-V
3. 关闭 Hyper-V（如果与 HAXM 冲突）

# 或使用 Windows Hypervisor Platform
# 开启：Windows 功能 → Hyper-V

问题3：包下载失败

# 清理缓存
flutter pub cache repair
flutter clean

# 使用镜像
setx PUB_HOSTED_URL https://pub.flutter-io.cn

# 使用 VPN

问题4：版本冲突

# 更新 Flutter
flutter upgrade

# 切换到稳定版
flutter channel stable
flutter upgrade

# 清除所有并重装
flutter precache

十七、学习资源

官方资源

课程推荐

免费课程：
- Flutter 官方教程：https://flutter.dev/learn
- Flutter 中文教程：https://flutter.cn/docs
- B站：Flutter 官方频道

付费课程：
- Udemy: Flutter & Dart 完整指南
- Coursera: Flutter 开发专项课程
- 极客时间: Flutter 核心技术与实战

社区资源

  • Stack Overflow: flutter 标签
  • GitHub: flutter/flutter 仓库
  • Reddit: r/FlutterDev
  • 掘金: Flutter 标签
  • CSDN: Flutter 社区

总结

环境验证清单

✅ Flutter SDK 安装
✅ Android Studio 安装
✅ Android SDK 配置
✅ 模拟器创建
✅ VSCode 配置
✅ 项目创建成功

开发流程建议

  1. 学习 Dart 语言基础
  2. 掌握 Flutter Widget 体系
  3. 学习状态管理方案
  4. 理解平台通道机制
  5. 实践项目开发
  6. 学习性能优化

快捷键参考

VSCode 快捷键：
F5: 启动调试
Ctrl+F5: 启动不调试
Ctrl+Shift+P: 命令面板
Alt+Shift+F: 格式化代码
Ctrl+.: 快速修复

Flutter 命令：
flutter create: 创建项目
flutter run: 运行项目
flutter build: 构建项目
flutter pub: 包管理
flutter doctor: 环境检查

下一步学习方向

  1. 深入 Dart 语言特性
  2. 学习 Flutter 高级 Widget
  3. 掌握状态管理（Provider、Riverpod）
  4. 学习动画和自定义绘制
  5. 了解 Flutter Web 和桌面开发
  6. 学习插件开发和原生集成

提示：Flutter 更新频繁，建议定期运行 flutter upgrade 保持最新。遇到问题时，查阅官方文档和社区资源通常能找到解决方案。

# windows # flutter # android-studio
Logo
开源鸿蒙跨平台开发者社区

开源鸿蒙跨平台开发社区汇聚开发者与厂商，共建“一次开发，多端部署”的开源生态，致力于降低跨端开发门槛，推动万物智联创新。

更多推荐

cover

Flutter for OpenHarmony 剧本杀组队App实战04：发起组队表单实现

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter for OpenHarmony 剧本杀组队App实战04：发起组队表单实现

avatar 开源鸿蒙跨平台开发者社区
cover

Flutter for OpenHarmony 剧本杀组队App实战04：发起组队表单实现

avatar 开源鸿蒙跨平台开发者社区