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


flutter1.9 + vscode + Andorid SDK + java JDK实践_第1张图片

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

flutter1.9 + vscode + Andorid SDK + java JDK实践_第2张图片

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

flutter1.9 + vscode + Andorid SDK + java JDK实践_第3张图片

再来配置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参数未知


flutter1.9 + vscode + Andorid SDK + java JDK实践_第4张图片
flutter1.9 + vscode + Andorid SDK + java JDK实践_第5张图片
flutter1.9 + vscode + Andorid SDK + java JDK实践_第6张图片

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

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


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

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


flutter1.9 + vscode + Andorid SDK + java JDK实践_第7张图片
flutter1.9 + vscode + Andorid SDK + java JDK实践_第8张图片

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

赶紧执行 flutter doctor -v 看看

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


flutter1.9 + vscode + Andorid SDK + java JDK实践_第9张图片
flutter1.9 + vscode + Andorid SDK + java JDK实践_第10张图片

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

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


flutter1.9 + vscode + Andorid SDK + java JDK实践_第11张图片

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

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


flutter1.9 + vscode + Andorid SDK + java JDK实践_第12张图片

----------新建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 报错

flutter1.9 + vscode + Andorid SDK + java JDK实践_第13张图片

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

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

Get-Host | Select-Object Version

flutter1.9 + vscode + Andorid SDK + java JDK实践_第14张图片

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

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

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

flutter1.9 + vscode + Andorid SDK + java JDK实践_第15张图片

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


flutter1.9 + vscode + Andorid SDK + java JDK实践_第16张图片


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


flutter1.9 + vscode + Andorid SDK + java JDK实践_第17张图片

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

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

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

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


flutter1.9 + vscode + Andorid SDK + java JDK实践_第18张图片

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

  再次webdev serve


flutter1.9 + vscode + Andorid SDK + java JDK实践_第19张图片

打包: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


flutter1.9 + vscode + Andorid SDK + java JDK实践_第20张图片
flutter1.9 + vscode + Andorid SDK + java JDK实践_第21张图片

解决:点击这里查看

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

flutter1.9 + vscode + Andorid SDK + java JDK实践_第22张图片


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


flutter1.9 + vscode + Andorid SDK + java JDK实践_第23张图片

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

# 查看是否连接安卓设备:包括真机,或者 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 去新建

你可能感兴趣的:(flutter1.9 + vscode + Andorid SDK + java JDK实践)