超多图手摸手,这次一定帮你搞定Win10下的Flutter开发环境 (三)

简介: 接上文哦

使用第三方Android模拟器,运行Flutter项目


有很多人无法使用AVD Manager来创建android模拟器,要进BIOS设置之类的,网上有不少教程,这里教大家用另外一种方法,使用第三方的Android模拟器来运行Flutter项目,比如网易mumu模拟器。


1:创建一个Flutter项目


使用flutter create xxxxx(xxx是项目名称,自己任取)


1650851272(1).png


回车后就会帮我们创建好一个Flutter项目模板,flutter pub get会从网络下载一些基础依赖库,这个时候大概率会停在这里(如果成功进行下去了,就忽略后面的环境变量配置)


1650851604(1).png


1.1:配置镜像站环境变量


由于国内网络直连Google的服务都有问题,所以我们需要配置一下镜像站的地址。


打开控制面板,进入用户账户\用户账户,点击更改我的环境变量,然后我们选择新建


1650851650(1).png


  • 添加第一个:PUB_HOSTED_URL


https://pub.flutter-io.cn


1650851689(1).png


  • 添加第二个:FLUTTER_STORAGE_BASE_URL


https://storage.flutter-io.cn


1650851722(1).png


添加完成之后,可能需要重启一次电脑


然后再次运行flutter create xxxxx应该是可以顺利创建成功了


1650851771(1).png


如果等了很久还是不行,就ctrl+c取消,然后重新运行flutter create xxxxx...

直到成功。如果还是不行,可在浏览器中访问 pub.flutter-io.cn 看看是否成功。我在编写教程时安装了数次,中间确实有一次一直就是pub get不成功,搞了2个多小时,能设置的环境变量换了个遍。最后就是不断取消,然后重新运行成功了。


2:运行Flutter项目到Android模拟器


使用VSCode打开这个文件夹,按F5运行。会发现没有Android模拟器,前面已经说过了,此篇文章是教大家如何使用第三方模拟器,比如网易mumu来调试Flutter应用


1650851828(1).png


2.1:安装网易mumu模拟器


最好是直接全部通过,如果和我一样提示不支持VT-x,暂时先不管,点击仍要继续


1650851857(1).png


1650851880(1).png


等待网易mumu安装器下载完全体的安装包并等待安装完成后,会自动打开模拟器


1650851909(1).png


点击右下方的屏幕旋转,切换为竖屏。然后打开命令提示符cd网易mumu模拟器的安装目录


cd C:\Program Files (x86)\MuMu\emulator\nemu\vmonitor\bin


1650851949(1).png


adb_server.exe connect 127.0.0.1:7555


1650852022(1).png


此时我们回到VSCode中,按下F5后就可以运行调试Flutter APP了


1650852048(1).png


耐心等待Gradle task运行(耐心已欠费),由于网易mumu模拟器的Android内核版本是29,会提示我们需要在Android Studio中下载对应的内核API。打开Android Studio,点击欢迎界面右下角的configure,选择AVD Manager


1650852090(1).png


随便选择一个设备型号,进入下一页选择API Level 29的内核下载


1650852121(1).png


1650852148(1).png


此时再回到VSCode中按下F5运行就可以成功在网易mumu模拟器中调试咱们的Flutter应用了


1650852189.png


如果你在这一步遇到错误 [ERROR:flutter/shell/gpu/gpu_surface_gl.cc(58)] Failed to setup Skia Gr context.


在VSCode项目的terminal里使用如下命令启动项目


flutter run --enable-software-rendering


但是这个方法会导致无法Hot Reload,需要手动在terminal中输入r


本文完


相关文章
|
13天前
|
Dart 前端开发 开发工具
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
【4月更文挑战第30天】本文介绍了Flutter SDK的安装和配置过程,以及如何创建并运行第一个Flutter应用。首先确保安装了Dart SDK和Flutter SDK,支持macOS、Linux和Windows。安装完成后,设置环境变量,然后通过`flutter doctor`验证安装。接着,使用`flutter create`命令创建新项目,进入项目目录并运行`flutter run`启动应用。在`main.dart`中修改代码以自定义应用。Flutter支持热重载和DevTools调试。本文为Flutter初学者提供了快速入门的指导。
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
N..
|
2月前
|
开发框架 Dart 开发工具
搭建Flutter开发环境
搭建Flutter开发环境
N..
17 0
|
10月前
|
Web App开发 Dart 前端开发
flutter开发环境搭建
flutter开发环境搭建
114 0
|
11月前
|
Java 开发工具 Android开发
遇到的几个flutter开发环境问题
遇到的几个flutter开发环境问题
|
11月前
|
开发工具 Android开发 Windows
Flutter AndroidStudio 开发环境报错cmdline-tools component is missing
Flutter AndroidStudio 开发环境报错cmdline-tools component is missing
|
12月前
|
开发框架 IDE 安全
Flutter3.0开发环境的配置
Flutter是Google推出的一款跨平台移动应用开发框架,支持iOS、Android、Web、Windows、macOS和Linux等多个平台。为了使用Flutter进行开发,首先需要配置Flutter开发环境。
|
移动开发 Dart 前端开发
Flutter(一)——认识Flutter以及搭建开发环境
Flutter(一)——认识Flutter以及搭建开发环境
101 0
Flutter(一)——认识Flutter以及搭建开发环境
|
Java 开发工具 Maven
Windows 10安装配置Flutter开发环境
Win 10安装 Flutter 开发环境完整教程附带踩坑记录。
422 0
Windows 10安装配置Flutter开发环境
|
Dart 开发工具 Android开发
Mac OS 配置 Flutter 开发环境
手把手教你如何在 Mac OS 下配置 Flutter 开发环境。
1158 0
Mac OS 配置 Flutter 开发环境
|
Linux 开发工具 iOS开发
Flutter for Web开发环境安装【1.5.4】
最新的Flutter 1.5.4已经支持Web开发,这个教程将介绍如何在Linux、windows和Mac下安装Flutter web开发环境:安装Flutter SDK和Flutter Web构建工具,并利用Flutter Web演示代码来验证开发环境搭建成功。
3035 0