Flutter 环境搭建等基础及使用vscode环境开发及终端运行项目

提示：此文章为前端学习flutter过程，如有歧义期望各位大大的宝贵意见

学习Dart 基础知识 移步这里
安装flutter环境相关 移步这里
flutter基础组件使用相关 移步这里

---

一、什么是Flutter

1.Flutter 介绍

二、Flutter 使用

1.电脑 安装配置 JDK 环境

1.1 下载安装JDK；下一步下一步默认安装即可；

安装包下载

https://www.oracle.com/java/technologies/javase/javase8u211-later-archive-downloads.html

1.2 配置JDK

计算机 -> 右键 -> 属性 -> 高级系统设置 -> 高级 ->环境变量
1.系统变量里新增JAVA_HOME，设置胃java sdk 根目录

2.系统变量里找到Path 在Path环境变量中新增如下代码

;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

1.3验证是否安装成功；

win+r => cmd => java 回车
javac 回车 同理

2.下载安装Android studio

https://developer.android.google.cn/studio

参考文档：https://download.csdn.net/download/qq_731335498/85187259

3.电脑上下载配置Flutter SDK

1.下载Flutter SDK;
https://docs.flutter.dev/development/tools/sdk/releases

2.把下载的Flutter SDK 随便解压到你想要安装Sdk的目录 如：D:\安装包\flutter安装环境需要软件\flutter-windows\flutter(这个目录自己定义)；

3.找到自己存放sdk的文件下的bin的目录配置到系统Path目录下；如下图

右键电脑 - > 属性 - > 高级系统设置 - > 高级- > 环境变量


配置路径 D:\安装包\flutter安装环境需要软件\flutter-windows\flutter\bin即可；

注意：校验是否成功 flutter -v

4.配置Flutter国内镜像

国内镜像如下：

https://flutter-io.cn/
https://flutter.dev/community/china

拉到flutter 中文网最下面配置方式，把下面这两句话配置到环境变量里面

$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

操作：右键电脑 - > 属性 - > 高级系统设置 - > 高级- > 环境变量 ->新建



注意：检验环境是否安装成功运行 flutter doctor

5.检验环境是否安装成功运行 flutter doctor

如果出现其他错误，

flutter doctor --android-licenses

解决办法，跳转 https://visualstudio.microsoft.com/downloads 下载 visual studio 安装桌面c++相关；

flutter 环境变量配置好之后，运行flutter doctor出现问题如下：

X HTTP host https://maven.google.com/ is not reachable. Reason: An error occurred while checking the HTTP host，

尝试很多方法都无法解决，Google好久也没有解决办法，自己尝试修改http_host_validator.dart文件后得到解决，特此记录，解决办法如下：

1、找到flutter sdk的文件目录，打开flutter\packages\flutter_tools\lib\src\http_host_validator.dart

2、将https://maven.google.com/ 修改为https://dl.google.com/dl/android/maven2/

3、关闭cmd命令窗口，重新打开cmd窗口

4、去到flutter\bin目录，删除cache文件夹

5、在cmd命令窗口重新运行flutter doctor,问题解决。

---

---

6.使用vscode 开发flutter

1.安装3个必用插件如下图

7.vscode开发创建项目

1.ctrl+shift+p 输入flutter new project

2.选择你要创建的类型

选择存放地址，及项目名称按回车 等待创建如下图；

耐心等待创建成功！运行 flutter run项目！
也可以 ctrl+shift+p 输入Flutter Select Device 选择模拟器，选择指定真机

8. 使用vscode 在夜神模拟器上调试

nox_adb.exe connect 127.0.0.1:620001

9.flutter 终端运行项目

flutter devices  // 查看所有设备
flutter run -d window // 运行到桌面端
flutter run  -d all   // 运行到全部设备
flutter  run    //运行到安卓端

10 . 终端常用快捷键

r 键： 热加载
R键： 热重载
p键： 显示网格
o键： 切换android和ios的预览模式
q键： 退出调试预览模式

code . 可以快捷打开vscode开发软件；

ctrl+shift +p 运行 Flutter:Run Flutter Doctor 也可以运行项目，在vscode中！！！

总结

学习Dart 基础知识 移步这里
安装flutter环境相关 移步这里
flutter基础组件使用相关 移步这里