惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

G
Google Developers Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
WordPress大学
WordPress大学
阮一峰的网络日志
阮一峰的网络日志
V
Visual Studio Blog
雷峰网
雷峰网
博客园_首页
The Cloudflare Blog
Hugging Face - Blog
Hugging Face - Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
爱范儿
爱范儿
小众软件
小众软件
D
Docker
P
Proofpoint News Feed
B
Blog
Vercel News
Vercel News
B
Blog RSS Feed
U
Unit 42
月光博客
月光博客
The GitHub Blog
The GitHub Blog
Apple Machine Learning Research
Apple Machine Learning Research
Y
Y Combinator Blog
I
InfoQ
Recent Announcements
Recent Announcements

OhYee 博客

小鹏辅助驾驶测评|OhYee 博客 小鹏非支持手机开启自动解锁|OhYee 博客 使用函数计算实现 301 重定向|OhYee 博客 针对 HTML 内容使用 Ant Design 图片弹框|OhYee 博客 博客进程泄露及僵尸进程解决|OhYee 博客 蓝易云服务器体验|OhYee 博客 SSH 调起本地 VSCode|OhYee 博客 【2022 秋招内推】阿里云后端研发工程师|OhYee 博客 使用函数计算获取 IP 地址信息|OhYee 博客 正确获取客户端 IP/HTTP Header 也可能重复|OhYee 博客 评测 Oculus Quest2 及 BigScreen|OhYee 博客 NextJS 热重载保留状态|OhYee 博客 如何优雅地贴 gist 代码|OhYee 博客 Linux 精细化文件权限|OhYee 博客 VSCode 容器开发环境|OhYee 博客 Clash 的不兼容更新排查|OhYee 博客 Zeek 导出 PCAP|OhYee 博客 记一次 ssh 配置问题|OhYee 博客 Git Commit 规范化工具|OhYee 博客 谈谈《星之卡比-探索发现》|OhYee 博客 VSCode 快捷键绑定 Shell 命令|OhYee 博客 ASN.1 语法及 X.509 证书格式解析解析|OhYee 博客 腾讯企业邮箱忽略 MX 记录发信|OhYee 博客 Chrome/Edge 标签组插件|OhYee 博客 【应届内推】阿里云后端研发工程师|OhYee 博客 损坏的 Typecho 备份处理为 JSON|OhYee 博客 VS Code VIM 插件高效使用|OhYee 博客 SSH 正反向代理|OhYee 博客 Let's Encrypt 根证书过期引发的问题|OhYee 博客 OpenWRT 忽略内核依赖|OhYee 博客
部署flutter环境以及运行demo|OhYee 博客
2018-12-15 · via OhYee 博客

部署环境

Java部分

虽然可以使用kotlin开发Android,但是由于安卓的一些工具仍然需要Java环境支持,因此Java是必须的
下面Android部分会需要使用sdkmanage工具,这个工具需要用到java.se.ee模块,在Jdk9后,该模块需要使用add module才能使用
而Jdk11后直接删掉了这个模块,所以为了省事,最好使用Jdk8
下载完成后,需要配置JAVA_HOMECLASS_PATH(sdkmanage和flutter都会用到)

flutter部分

下载

进入flutter官网,下载最新版本

下载flutter下载flutter

解压并添加到环境变量

由于flutter本身只是一个压缩包,因此需要手动添加到环境变量里
右键我的电脑->属性->高级系统设置->环境变量,将flutter/bin目录添加到环境变量里

安装Visual Studio Code插件

VSCode里已经有了名为flutter的flutter插件,直接安装即可。
他会同时帮你安装Dart插件

安装插件安装插件

Android部分

既然选择了Visual Studio Code,再去下Android Studio就太奇怪了
因此选择使用sdkmanager来管理

安装SDK

首先sdkmanager --list来看下可以安装的package有哪些
根据flutter官网上的

Download and install Android Studio.
Start Android Studio, and go through the ‘Android Studio Setup Wizard’. This installs the latest Android SDK, Android SDK Platform-Tools, and Android SDK Build-Tools, which are required by Flutter when developing for Android.

可以得知我们应该安装最新版的Android SDK,Android SDK Platform-Tools, Android SDK Build-Tools。

那么找出来最新版的安装即可
需要特别注意的是:SDK和手机版本是由对应关系的

系统版本 API版本 开发代号
2.3.3 - 2.3.7 10 Gingerbread
4.0.3 - 4.0.4 15 Ice Cream Sandwich
4.1.x 16 Jelly Bean
4.2.x 17 Jelly Bean
4.3 18 Jelly Bean
4.4 19 KitKat
5.0 21 Lollipop
5.1 22 Lollipop
6.0 23 Marshmallow
7.0 24 Nougat
7.1 25 Nougat
8.0 26 Oreo
8.1 27 Oreo
9.0 28 Pie

比如虽然最新的是api28,但是我手机是安卓8.1,那么我只能下载到API27
这里安装的东西,在安装完成后会自动加到环境变量中,因此如果已经打开了编辑器或者终端,需要重启编辑器、终端以重新加载环境变量

sdkmanager --install "add-ons;addon-google_apis-google-24"
sdkmanager --install "build-tools;27.0.3"
sdkmanager --install "platforms;android-27"
sdkmanager --install "platform-tools"
sdkmanager --install "emulator"
sdkmanager --install "system-images;android-27;google_apis_playstore;x86"

安装模拟器的原因是:有时候模拟器测试更能会更方便一点
而且模拟器镜像应该是google api,貌似default是无法识别的

安装完成后应该类似下面的样子

Installed packages:=====================] 100% Computing updates...
  Path                                               | Version | Description                             | Location
  -------                                            | ------- | -------                                 | -------
  add-ons;addon-google_apis-google-24                | 1       | Google APIs                             | add-ons\addon-google_apis-google-24\
  build-tools;27.0.3                                 | 27.0.3  | Android SDK Build-Tools 27.0.3          | build-tools\27.0.3\
  emulator                                           | 28.0.20 | Android Emulator                        | emulator\
  patcher;v4                                         | 1       | SDK Patch Applier v4                    | patcher\v4\
  platform-tools                                     | 28.0.1  | Android SDK Platform-Tools              | platform-tools\
  platforms;android-27                               | 3       | Android SDK Platform 27                 | platforms\android-27\
  system-images;android-27;google_apis_playstore;x86 | 3       | Google Play Intel x86 Atom System Image | system-images\android-27\google_apis_playstore\x86\
  tools                                              | 26.1.1  | Android SDK Tools 26.1.1                | tools\

Available Packages:
  Path                                                                                     | Version      | Description
  -------                                                                                  | -------      | -------
  add-ons;addon-google_apis-google-15                                                      | 3            | Google APIs
  add-ons;addon-google_apis-google-16                                                      | 4            | Google APIs
  add-ons;addon-google_apis-google-17                                                      | 4            | Google APIs
  add-ons;addon-google_apis-google-18                                                      | 4            | Google APIs
  add-ons;addon-google_apis-google-19                                                      | 20           | Google APIs
  add-ons;addon-google_apis-google-21                                                      | 1            | Google APIs
  ……

新建项目

在命令面板里输入flutter,选择新建项目,然后输入一个合法的项目名并选择存放位置。
类似test、flutter的名字都是不合法的
然后插件会自动在对应文件夹重新打开VS Code,并执行生成任务
等几秒就会生成一份能够运行的demo出来

新建项目新建项目

运行项目

手机运行

不管别的,先把demo跑起来是第一步要做的
不考虑模拟器等操作,直接手机插到电脑上,打开开发者选项的USB调试
一般情况下,右下角的no device会变成你的手机型号
(如果没反应的话可以考虑装一次啊手机驱动)

连接手机连接手机

启动flutter doctor
开始检查必须的环境

Doctor summary (to see all details, run flutter doctor -v):
[] Flutter (Channel stable, v1.0.0, on Microsoft Windows [Version 10.0.17763.134], locale zh-CN)
[] Android toolchain - develop for Android devices (Android SDK 28.0.3)
[!] Android Studio (not installed)
[] VS Code (version 1.30.0)
[] Connected device (1 available)

! Doctor found issues in 1 category.

有可能会提示licenses有问题,不过这个不是事,直接flutter doctor --android-licenses无脑y即可

然后就检测所有环境没有问题。

进入VSCode的Debug工具,第一次运行会自动生成launch.json
然后开始运行,需要等待一段时间Initializing gradle...
然后是Resolving dependencies...
……
需要注意的是,这个过程建议挂梯子,不然可能就卡这不动了

手机运行效果手机运行效果

使用模拟器运行

由于上面说到了flutter貌似只认google api的镜像,因此应该新建google api的虚拟机
这里为了防止出别的问题,直接让flutter自己生成。右下角device那里直接new device
(如果是安装镜像前就打开了编辑器,应该关掉编辑器重开,已加载环境变量)

这里启动模拟器建议用命令行启动(第一次启动可能会比较久)

使用wipe-data清除数据(以后启动就不需要这个了)
verbose输出详细信息,可以及时看到报错信息
http-proxy挂上本地的代理,没有对比出来是否真的用到了

我这里第一次启动花了很久,所以建议上面的参数还是都带上

emulator -avd flutter_emulator -wipe-data -verbose -http-proxy 127.0.0.1:1080

等待启动后,和手机调试一样即可

手机运行效果手机运行效果