核心内容摘要
设计副业技能匹配工具，输入自身技能，匹配需求副业，标注技能提升方向，帮助从业者发挥优势，提升副业竞争力。
目录Windows 下使用 Flutter 进行混合开发环境搭建 概述
系统要求与准备硬件要求软件要求
Flutter SDK 安装方法一官方安装推荐方法二使用包管理器可选方法三手动下载 镜像加速
Android 开发环境
安装 Android Studio
Android SDK 配置
安装必要的 SDK 组件
VSCode 配置推荐编辑器
安装 VSCode
Flutter 插件安装
VSCode 配置
模拟器配置
创建 Android 模拟器
启动模拟器
性能优化配置
环境验证
运行 flutter doctor
2.
常见问题解决
创建第一个 Flutter 项目
项目创建
项目结构
运行应用
依赖管理
pubspec.yaml 配置
包管理命令
状态管理和架构
推荐架构Provider MVVM
状态管理方案对比
平台通道Platform Channels
混合开发架构
Android 平台通道示例
调试与性能分析
调试工具
VSCode 调试配置
性能优化
构建与发布
构建 Android APK
构建配置
生成密钥库
网络与镜像配置国内用户
镜像源配置
Android SDK 镜像
Git 镜像
扩展开发能力
Flutter 与原生混合
集成现有原生模块
常用插件推荐
CI/CD 集成
GitHub Actions 配置
自动化测试
十六、
常见问题解决问题1Flutter doctor 显示红叉问题2模拟器启动失败问题3包下载失败问题4版本冲突
学习资源官方资源课程推荐社区资源
总结环境验证清单开发流程建议快捷键参考下一步学习方向Windows 下使用 Flutter 进行混合开发环境搭建 概述Flutter 是 Google 推出的跨平台 UI 框架可以构建 Android、iOS、Web、桌面等多个平台的应用。
在 Windows 上主要支持 Android 和 Web 开发。
系统要求与准备硬件要求组件最低要求推荐配置操作系统Windows 10 (64位)Windows 11 22H2内存8 GB16 GB存储40 GB 可用空间SSD100 GB磁盘格式NTFSNTFS分辨率1280×8001920×1080软件要求#
PowerShell
0预装# 检查版本$PSVersionTable.PSVersion#
Git for Windows必需# 下载https://git-scm.com/download/win#
启用开发者模式可选# 设置 → 更新和安全 → 开发者选项 → 开发人员模式
Flutter SDK 安装方法一官方安装推荐#
下载 Flutter SDK# https://flutter.dev/docs/get-started/install/windows#
解压到自定义目录避免中文路径# 例如C:\src\flutter#
添加环境变量setx PATH%PATH%;C:\src\flutter\bin#
验证安装flutter--version方法二使用包管理器可选#
使用 Chocolatey包管理器choco install flutter#
使用 Scoopscoop bucket add extras scoop install flutter方法三手动下载 镜像加速# 国内用户镜像加速#
设置环境变量setx PUB_HOSTED_URL https://pub.flutter-io.cn setx FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn#
从镜像下载# https://flutter.cn/docs/get-started/install/windows
Android 开发环境
安装 Android Studio# 下载https://developer.android.com/studio# 版本最新稳定版# 安装组件必需☑️ Android Studio ☑️ Android SDK ☑️ Android Virtual Device ☑️ Performance(Intel® HAXM)
Android SDK 配置#
打开 Android Studio# 首次运行会自动安装 Android SDK#
配置环境变量setx ANDROID_HOMEC:\Users\%USERNAME%\AppData\Local\Android\Sdksetx PATH%PATH%;%ANDROID_HOME%\platform-toolssetx PATH%PATH%;%ANDROID_HOME%\toolssetx PATH%PATH%;%ANDROID_HOME%\emulator#
安装必要的 SDK 包flutter doctor--android-licenses
安装必要的 SDK 组件# 通过 Android Studio 安装
打开 Android Studio
打开 SDK Manager工具 → SDK Manager
安装-Android SDK Platform 33最新稳定版-Android SDK Build-Tools
33.
0-Android Emulator-Android SDK Platform-Tools-Intel x86 Emulator Accelerator(HAXM installer)# 或使用命令行推荐flutter doctor# 按照提示安装缺失的组件
VSCode 配置推荐编辑器
安装 VSCode# 下载https://code.visualstudio.com/# 版本最新稳定版
Flutter 插件安装VSCode 扩展商店安装
Dart由 Dart Code 提供
Flutter由 Dart Code 提供
Awesome Flutter Snippets
Flutter Widget Snippets
Pubspec Assist 安装步骤-打开 VSCode-扩展面板CtrlShiftX-搜索并安装上述插件
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}}
模拟器配置
创建 Android 模拟器# 方法1通过 Android Studio
打开 Android Studio
工具 → AVD Manager
点击Create Virtual Device
选择设备推荐 Pixel 5
选择系统镜像推荐 API 33x86_64
配置RAM 2048MBStorage 2048MB# 方法2命令行创建flutter emulators--create[--name xyz]
启动模拟器# 查看可用模拟器flutter emulators# 启动指定模拟器flutter emulators--launch Pixel_5_API_33# 或使用 adb 命令emulator-avd Pixel_5_API_33-gpu host# 在 VSCode 中启动CtrlShiftP →Flutter: Launch Emulator
性能优化配置# 编辑模拟器配置文件 # C:\Users\用户名\.android\avd\Pixel_5_API_
avd\config.ini hw.ramSize4096 hw.gpu.enabledyes hw.gpu.modehost hw.keyboardyes hw.sdCardyes disk.dataPartition.size4G hw.lcd.density440 hw.lcd.height1920 hw.lcd.width1080
环境验证
运行 flutter doctor# 检查环境完整性flutter doctor# 期望输出全部通过[✓]Flutter(Channel stable,
3.
x,on Windows
..)[✓]Android toolchain-developforAndroid devices(Android SDK version
33.
0.
[✓]Chrome-developforthe web[✓]Visual Studio-developforWindows(Desktop)[✓]Android Studio(version
2022.
[✓]VS Code(version
1.
x)[✓]Connected device(2 available)[✓]Network resources
2.
常见问题解决# 问题1Android licenses not acceptedflutter doctor--android-licenses# 全部输入 y 接受# 问题2HAXM not installed# 下载安装https://github.com/intel/haxm/releases# 或使用 Windows Hypervisor Platform# 问题3No connected devices# 检查模拟器是否启动# 检查 USB 调试是否开启真机adb devices
创建第一个 Flutter 项目
项目创建# 创建新项目flutter create my_app# 带描述创建flutter create--org com.example--project-name my_app--descriptionMy first Flutter appmy_app# 指定平台flutter create--platformsandroid,web,windows my_app# 进入项目cd my_app
项目结构my_app/ ├── android/ # Android 平台代码 ├── ios/ # iOS 平台代码Mac 需要 ├── web/ # Web 平台代码 ├── windows/ # Windows 桌面代码 ├── lib/ # 主要代码目录 │ └── main.dart # 应用入口 ├── test/ # 测试文件 ├── pubspec.yaml # 项目配置和依赖 ├── analysis_options.yaml # 代码分析配置 └── README.md
运行应用# 运行到 Android 模拟器flutter run# 运行到 ChromeWebflutter run-d chrome# 运行到连接的 Android 设备flutter run-d device_id# 调试模式运行flutter run--debug# 发布模式运行flutter run--release# VSCode 中运行F5 或 CtrlF5
依赖管理
pubspec.yaml 配置name:my_appdescription:A new Flutter project.publish_to:none# 不上传到 pub.devversion:
1.
01environment:sdk:
2.
1
0
3.
0dependencies:flutter:sdk:flutter# UI 框架cupertino_icons:^
1.
2# 状态管理provider:^
6.
0# 路由go_router:^
6.
0# HTTP 请求dio:^
5.
0# 本地存储shared_preferences:^
2.
0# 设备信息device_info_plus:^
8.
0dev_dependencies:flutter_test:sdk:flutterflutter_lints:^
2.
0flutter:uses-material-design:trueassets:-assets/images/-assets/icons/
包管理命令# 获取依赖flutter pub get# 添加依赖flutter pub add package_name# 升级依赖flutter pub upgrade# 检查过时依赖flutter pub outdated# 清理缓存flutter pub cache repair
状态管理和架构
推荐架构Provider MVVM// lib/providers/counter_provider.dartimportpackage:flutter/foundation.dart;classCounterProviderextendsChangeNotifier{int _count0;intgetcount_count;voidincrement(){_count;notifyListeners();}voiddecrement(){_count--;notifyListeners();}}// lib/main.dartvoidmain(){runApp(MultiProvider(providers:[ChangeNotifierProvider(create:(_)CounterProvider()),],child:MyApp(),),);}
状态管理方案对比方案适合场景学习曲线性能Provider简单应用初学者低良好Riverpod大型应用推荐中优秀Bloc/Cubit企业级应用高优秀GetX快速开发低良好MobX响应式编程中良好
平台通道Platform Channels
混合开发架构Flutter UI ↓ Method Channel / Event Channel ↓ Platform-Specific Code (Android/iOS) ↓ Native APIs / SDKs
Android 平台通道示例// Flutter 端importpackage:flutter/services.dart;classNativeMethods{staticconstplatformMethodChannel(com.example/native);staticFutureStringgetBatteryLevel()async{try{finalresultawaitplatform.invokeMethod(getBatteryLevel);returnBattery level:$result%;}onPlatformExceptioncatch(e){returnFailed: ${e.message}.;}}}// Android 端 (android/app/src/main/kotlin/.../MainActivity.kt)importandroidx.annotation.NonNullimportio.flutter.embedding.android.FlutterActivityimportio.flutter.embedding.engine.FlutterEngineimportio.flutter.plugin.common.MethodChannelclassMainActivity:FlutterActivity(){privatevalCHANNELcom.example/nativeoverridefunconfigureFlutterEngine(NonNullflutterEngine:FlutterEngine){super.configureFlutterEngine(flutterEngine)MethodChannel(flutterEngine.dartExecutor.binaryMessenger,CHANNEL).setMethodCallHandler{call,result-if(call.methodgetBatteryLevel){valbatteryLevelgetBatteryLevel()result.success(batteryLevel)}else{result.notImplemented()}}}privatefungetBatteryLevel():Int{// 实现获取电池电量的原生代码return85}}
调试与性能分析
调试工具# 常用调试命令flutter analyze# 代码分析flutter test# 运行测试flutter run--profile# 性能分析模式flutter run--release# 发布模式# DevToolsflutter pub global activate devtools flutter pub global run devtools# 或直接在 VSCode 中打开 DevTools
VSCode 调试配置// .vscode/launch.json{version:
0.
0,configurations:[{name:Flutter,request:launch,type:dart,program:lib/main.dart,args:[--dart-defineENVdev]},{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}]}
性能优化//
使用 const 构造函数Widgetbuild(BuildContextcontext){returnconstMyWidget();// 避免重建}//
使用 keysListView.builder(itemBuilder:(context,index)MyItem(key:ValueKey(items[index].id),// 优化列表性能),)//
避免重建classMyWidgetextendsStatefulWidget{override_MyWidgetStatecreateState()_MyWidgetState();}//
使用 AutomaticKeepAliveClientMixinclass_MyTabStateextendsStateMyTabwithAutomaticKeepAliveClientMixin{overrideboolgetwantKeepAlivetrue;}
构建与发布
构建 Android APK# 调试版本flutter build apk--debug# 发布版本flutter build apk--release# 分离架构减小包体积flutter build apk--split-per-abi# 构建 App Bundle上传到 Play Storeflutter build appbundle
构建配置# android/app/build.gradleandroid{compileSdkVersion 33 defaultConfig{applicationId com.example.myapp minSdkVersion 21 targetSdkVersion 33 versionCode 1 versionName
1.
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}}}
生成密钥库# 生成密钥库keytool-genkey-v-keystore keystore.jks-keyalg RSA-keysize 2048-validity 10000-alias key# 位置android/app/keystore.jks
网络与镜像配置国内用户
镜像源配置# 永久设置环境变量setx PUB_HOSTED_URL https://pub.flutter-io.cn setx FLUTTER_STORAGE_BASE_URL https://storage.flutter-io.cn# 临时设置$env:PUB_HOSTED_URLhttps://pub.flutter-io.cn$env:FLUTTER_STORAGE_BASE_URLhttps://storage.flutter-io.cn
Android SDK 镜像# 创建配置文件 # C:\Users\用户名\.android\repositories.cfg # 使用清华镜像 ## 无法直接配置建议使用代理
Git 镜像# 设置 Git 代理如果需要git config--global http.proxy http://
127.
0.
1:1080 git config--global https.proxy https://
127.
0.
1:1080
扩展开发能力
Flutter 与原生混合// 使用 platform_interface 创建插件//
创建接口包//
创建平台实现android/、ios///
在 Flutter 中调用
集成现有原生模块步骤
在 android/app/build.gradle 中添加依赖
通过 MethodChannel 调用原生功能
处理数据序列化/反序列化
错误处理
常用插件推荐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 集成
GitHub Actions 配置# .github/workflows/flutter.ymlname:Flutter CI/CDon:push:branches:[main,develop]pull_request:branches:[main]jobs:build:runs-on:ubuntu-lateststeps:-uses:actions/checkoutv3-uses:subosito/flutter-actionv2with:flutter-version:
3.
xchannel:stable-run:flutter pub get-run:flutter analyze-run:flutter test-run:flutter build apk--release--split-per-abi-name:Upload APKuses:actions/upload-artifactv3with:name:app-releasepath:build/app/outputs/flutter-apk/*.apk
自动化测试// 单元测试voidmain(){test(Counter increments,(){finalcounterCounter();counter.increment();expect(counter.value,
;});}// 集成测试importpackage:flutter_test/flutter_test.dart;importpackage:my_app/main.dart;voidmain(){testWidgets(Counter increments,(WidgetTestertester)async{awaittester.pumpWidget(MyApp());expect(find.text(
,findsOneWidget);awaittester.tap(find.byIcon(Icons.add));awaittester.pump();expect(find.text(
,findsOneWidget);});}
十六、
常见问题解决问题1Flutter doctor 显示红叉# 检查 Android Studio 插件# Android Studio → 插件 → 搜索 Flutter → 安装# 检查许可证flutter doctor--android-licenses# 重启电脑问题2模拟器启动失败# 启用虚拟化技术
进入 BIOS/UEFI
启用 Intel VT-x 或 AMD-V
关闭 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版本冲突# 更新 Flutterflutter upgrade# 切换到稳定版flutter channel stable flutter upgrade# 清除所有并重装flutter precache
学习资源官方资源Flutter 官方文档Flutter 中文网Flutter 实战Dart 语言教程课程推荐免费课程-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 配置✅ 项目创建成功开发流程建议学习 Dart 语言基础掌握 Flutter Widget 体系学习状态管理方案理解平台通道机制实践项目开发学习性能优化快捷键参考VSCode 快捷键F5:启动调试CtrlF5:启动不调试CtrlShiftP:命令面板AltShiftF:格式化代码Ctrl.:快速修复 Flutter 命令flutter create:创建项目flutter run:运行项目flutter build:构建项目flutter pub:包管理flutter doctor:环境检查下一步学习方向深入 Dart 语言特性学习 Flutter 高级 Widget掌握状态管理Provider、Riverpod学习动画和自定义绘制了解 Flutter Web 和桌面开发学习插件开发和原生集成提示Flutter 更新频繁建议定期运行flutter upgrade保持最新。
遇到问题时查阅官方文档和社区资源通常能找到解决方案。