flutter1.9 + vscode + Andorid SDK + java JDK实践

前提

如果已安装Git for Windows,请确保命令提示符或PowerShell中运行 git 命令,不然在后面运行flutter doctor时将出现Unable to find git in your PATH错误, 此时需要手动添加C:\Program Files\Git\bin至Path系统环境变量中

第一步:安装flutter

step 1

    配置镜像环境变量---让flutter命令执行更快,比如pub下载依赖

    PUB_HOSTED_URL=https://pub.flutter-io.cn

    FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

step 2

拉代码git  clone  https://github.com/flutter/flutter,(如:C:\src\flutter;注意,不要将flutter安装到需要一些高权限的路径如C:\Program Files\)

在Flutter安装目录的flutter文件下找到flutter_console.bat,双击运行并启动flutter命令行,

step3

配置fultter环境变量,以便使用flutter命令:在path加入的路劲指向flutter文件夹的bin目录,例如:C:\flutter\bin

接下来,你就可以在Flutter命令行运行flutter命令了

完成以上三步就成功安装了flutter,运行flutter doctor -v 查看具体信息,会提示Andorid SDK未安装等

第二步: vscode安装插件

  在插件市场安装flutter,dart

第三步: java jdk 安装

   目的:执行java -version能成功展示版本号

为了避免高版本带来的不必要影响,我这里安装 java8

第四步: 下载Andorid SDK 

注意:建议使用andriod studio直接批量下载(不踩坑,avd版本高且服务齐全),以下介绍权当了解配置

    我在这里下载: 这里面有  SDK Tools (Android SDK的可下载组件。它包括用于Android SDK的完整开发和调试工具集)+ SDK Platform-Tools (这是 adb, fastboot 等工具包) +  Build-Tools (这是Android开发所需的Build-Tools) + Andorid  SDK  的组合。可以在网站里下载相应的版本组合到一个文件夹,也可以使用SDK Manager 来可视化管理以上所有需要的东西

        这里我选择在网站下载一个SDK Manager


        下载上图中第二个圈圈中的,运行SDK manager.exe

运行后查看大神的详细介绍,一路安装会发现,原本空空的platforms 文件夹有了安装sdk。也多了build-tools,platform-tools

再来配置platform-tools和tools的环境变量,查看文件夹就能明白是为了让你能执行adb,和sdkmanager 和其他 命令

  注意android sdk环境变量需要在path后面添加\platform-tools和\tools两条路径,我的文件放在这个testjdk文件夹

把这句;D:\testjdk\platform-tools;D:\testjdk\tools\bin添加到系统变量Path后面就行了

在cmd命令窗口输入android -h验证环境变量是否配置成功

---------------以上就是全部安装内容-----------

遇到的问题

1.在命令提示符或PowerShell窗口中运行此命令。目前,Flutter不支持像Git Bash这样的第三方shell。

      不然会提示:SocketException: OS Error 信号灯超时时间已到,让你一脸懵逼,无法继续。

 2. windows7上 cmd指向有时候会出问题,例如尝试找git的安装目录:执行 where git  会提示where不是内部或者外部命令,而flutter需要git

可以发现C:\Windows\System32里面搜索cmd.exe可以执行命令。将C:\Windows\System32添加到环境变量即可

3. adb.exe 是Andriod SDK 里面用来桥接设备的,位于platform-tools文件夹内,如果配置环境变量后执行adb提示无法执行,

也许是安装的程序过于精简没有附带共用的dll,可以尝试安装“微软常用运行库集合”。 还有可能是进程端口被占用,打开任务管理器如果有运行中的adb,右键查看是运行的文件夹,不是自己想要的就杀掉

  提示:adb.exe 0xc000007b 应用程序无法正常启动

解决: 尝试安装 微软常用运行库合集,重启解决


4. 证书许可 

网上说要执行flutter doctor --android-licenses  无效,提示Unknown argument --licenses参数未知


网上说是因为sdkmanager版本太低,尝试升级sdk  sdkmanager --update  要直到执行sdkmanager  --help里面出现 --licenses命令才算升级成功,

解决这个问题要知道Andorid sdk目录结构。会发现sdkmanager.exe在 tools\bin 目录下。环境变量的路径要设置到bin目录,要么直接在bin目录shirft + 右键打开命令窗口。我选择添加环境变量


  但是很尴尬,我升级很多次都没有出现这--licenses命令

3.尝试下载 tools 文件夹  看看有没有此命令


进入下载的tools文件夹打开cmd,执行 sdkmanager --help  发现有licenses命令,替换掉我的testjdk文件夹中的整个tools文件夹。

赶紧执行 flutter doctor -v 看看

根据下面的提示看起来是下载的sdk指向不对,而且替换文件夹后sdk manager.exe 无法运行了(暂不影响,可以用sdkmanager --help 命令行查看可安装的进行安装)。


此时我计划新建一个testjdk,去重新下载了一个,运行上图的SDK Manager.exe 下载所有需要的安卓sdk版本后,再替换tools文件夹,这里下载了第一个安装包。

(其实网站里面也可以单独下载sdk,tools,build-tools等等自己去组合)


注意改变环境变量,然后测试,会提示 Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

这里按照提示执行即可,一路yes就成功了


----------新建flutter 项目----------

在vscode    crtl + shift + p   

选择第一项 flutter  new project

输入项目名

成功

下载夜神模拟器

  提示驱动版本过低 ---- 驱动精灵---驱动升级一个

  cd 到对应夜神模拟器 目录

打开cmd  执行 nox_adb.exe connect 127.0.0.1:62001    (把安装目录下的bin目录路径放入环境变量)

mumu模拟器同理 

adb_server.exe connect 127.0.0.1:7555

vs code打开的flutter项目就能看到右下角有了设备号

问题: 如果adb  devices没有看到设备,链接设备容易出现灵异情况,时常连不上,多试几次吧,或者nox_adb.exe disconnect 127.0.0.1:62001 后再试

----------新建flutter-web 项目----------

flutter channel 查看flutter分支

flutter channel  beta  切换到beta分支(据说beta分支才有web支持)

切换分之后输入flutter 报错

没有powershell ??? windows 7 sp1 是有的,powershell 2.0

单击“开始”、“所有程序”、“附件”和“Windows PowerShell”,然后单击“Windows PowerShell”

Get-Host | Select-Object Version

万能的stackoverflow 有人踩坑, 尝试下载Windows Management Framework 5.1

stackoverflow 里面的链接下载的包要看和自己电脑匹不匹配,我的就不匹配,重启过程中提示:update 失败

只能去查官方文档了,还是官方文档详细:我的渣渣 win7 sp1 还要先安装先决条件.NET Framework 4.5.2。 下面写的非常清楚了

重启电脑,发现windows update成功,验证flutter,可以看到切换分支后在重新下载dart pub等



1.安装 webdev是启动本地服务器使用: flutter pub global activate webdev

2. 根据提示配置环境变量  C:\flutter\.pub-cache\bin  (我的flutter放在c盘)


在C:\flutter\.pub-cache\bin 打开cmd运行webdev serve 出现错误“‘dart’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。 ‘pub’ 不是内部或外部命令,也不是可运行的程序 或批处理文件。“

配置环境变量dart-sdk。在flutter的bin目录中。C:\flutter\bin\cache\dart-sdk

在path变量最后添加dart路径=》安装flutter存放路径\flutter\bin\cache\dart-sdk\bin

------首次创建新flutter-web项目(在stable分支)----------

1.  vs code 创建项目  ctrl + shift + p    点击下拉中的flutter new  project。输入项目名即可(这样新建的项目包含android和ios,还没有web文件夹。不是我想要的)

2. 命令行创建 web 项目需要安装另一个工具 

    执行:flutter pub global activate stagehand

跟安装 webdev 一样 安装成功后可以执行下面命令查看帮助 flutter pub global run stagehand


可以看到这里有7中方式建项目,我选择了web-simple (网友的第二项是:flutter-web, 私以为网友新建的项目已经配置好flutter-web依赖,我这里没有只能自己配置)

找到一个放项目的文件夹:执行 flutter pub global run stagehand web-simple 创建项目

根据提示执行 pub get 解析依赖包

执行webdev serve,跑起来了。运行就在chrome打开localhost:8080即可


3. 配置依赖,pub get 会很慢,耐心等待。。。。。

  再次webdev serve


打包:webdev build


------第二次创建新flutter-web项目(在beta分支)----------

在vs code    ctrl + shift + p  可以看到 flutter new project (还是没有看见网友的 flutter new  web  project)

选择,输入项目名,创建成功

或者

flutter create myapp

cd myapp

由于我之前开启了web支持(flutter config --enable-web) 可以发现项目里面有web文件夹,

根据提示,执行flutter run,可以看见有两个设备

选择在chrome打开项目flutter run-d  chrome  提示Failed to bind web development server


解决:点击这里查看

flutter run -d chrome --web-port=8080 --web-hostname= the value of IPv4 Address ( ipconfig 找到IPv4 )运行成功


打包web flutter build web 会看见生成的build文件夹,代码被编译成js


下面探索移动端开发链接设备

# 查看是否连接安卓设备:包括真机,或者 AVD(开发工具提供的虚拟设备)

$ flutter devices

# 查看可用的 AVD

$  flutter emulators

1 available emulator:

Nexus_5X_API_28 • Nexus 5X • Google • Nexus 5X API 28

# 启用 AVD,会自动打开虚拟设备,

$ flutter emulator --launch Nexus_5X_API_28 • Nexus 5X • Google • Nexus 5X API 28

可用的AVD,可以运行在放置安卓sdk目录的  AVD  Manager.exe 去新建

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,098评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,213评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,960评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,519评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,512评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,533评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,914评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,574评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,804评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,563评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,644评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,350评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,933评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,908评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,146评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,847评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,361评论 2 342