提示：本文是一篇前端学习文章flutter过程中，如果有歧义，希望大家有很大的宝贵意见。

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

文章目录

• 1.什么是Flutter

• • 1.Flutter 介绍

• 二、Flutter 使用

• • 1.电脑 安装配置 JDK 环境
  • • 1.1 下载安装JDK；下一步是默认安装；
    • 1.2 配置JDK
    • 1.3验证安装是否成功；
  • 2.下载安装Android studio
  • 3.在计算机上下载配置Flutter SDK
  • 4.配置Flutter国内镜像
  • 5.验证环境是否已安装并成功运行 flutter doctor
  • 6.使用vscode 开发flutter
  • 7.vscode开发和创建项目
  • 8. 使用vscode 夜神模拟器的调试
  • 9.flutter 码头运营项目
  • 10 . 终端常用快捷键

• 总结

• • *

1.什么是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%in;%JAVA_HOME%jrein

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.选择要创建的类型

选择存储地址，然后按Enter键输入项目名称。 等待创建下图；

耐心等待创造成功吧！跑 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中！！！