零、Error

  1. 域名不能为默认的example,否则创建过程会失败
  2. Languages & frameworks 没有 Flutter

现象:
安装了 Flutter Dart 插件后, File | Settings | Languages & Frameworks 中看不到 Flutter 和 Dart
解决:
创建 或 打开 一个 flutter 项目, 之后就能看到了.

  1. android Gradle 编译时下载依赖失败”: 去gradle-6.3-all目录下查看

解决一：如果报错点击 Flie->Sync Project With Gradle Files 重新下载 Gradle ,这个过程比较慢 10-30 分 钟左右。
解决二：开启手机热点重试
解决三：谷歌或者百度搜索 “android Gradle 编译时下载依赖失败”

一、Windows

1.1 配置Java JDK

  • 下载

jdk下载地址

  • 双击安装(目录默认即可)

image.png

  • 环境变量
    • 系统变量 JAVA_HOME ： C:\Program Files\Java\jdk1.8.0_31
    • Path中 %JAVA_HOME%\bin；%JAVA_HOME%\jre\bin
  • 验证安装结果
    1. 配置完成后重新打开新终端
    2. 命令 java 和 javac 是否有输出

      1.2 安装 Android Studio

      Android Studio下载地址
      C盘内存不够，SDK可安装到其他盘符。（安装时可能没有安装SDK，则不需要考虑）

首次打开：不导入settings、don’t send、cancel配置代理

Install Type：选择Standard模式，会默认安装SDK — 等待安装完成Finish即可

1.3 安装 Flutter SDK

Flutter SDK下载 — flutter_windows_2.0.3-stable.zip
建议将zip移动到需要放置的地方再解压（因为文件数量比较多，类似于node_modules，移动起来不方便）

配置到Path：D:\flutter_windows\flutter\bin — 不要有中文和空格即可

// 清华大学 TUNA 协会 FLUTTER_STORAGE_BASE_URL: https://mirrors.tuna.tsinghua.edu.cn/flutter PUB_HOSTED_URL: https://mirrors.tuna.tsinghua.edu.cn/dart-pub

  1. <a name="xV6g4"></a>
  2. ## 1.5 运行 `flutter doctor` 命令检测环境是否配置成功
  3. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/1292297/1617169512067-77d9e473-076b-42e2-9dc6-86111e0e1f31.png#align=left&display=inline&height=212&margin=%5Bobject%20Object%5D&name=image.png&originHeight=424&originWidth=1083&size=61448&status=done&style=none&width=541.5)<br />首次运行需要接着执行 `flutter doctor --android-licenses` ；并一路在提示输入 Y/N 的地方全部输入 Y即可。<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1292297/1617169665435-061f5ade-d644-4ddc-a48f-0b2344117975.png#align=left&display=inline&height=52&margin=%5Bobject%20Object%5D&name=image.png&originHeight=103&originWidth=567&size=7363&status=done&style=none&width=283.5) -- Success！
  4. <a name="aXM6l"></a>
  5. ## 1.6 为Android Studio安装Flutter插件
  7. - 重新打开 -> Configure -> Plugins -> 搜索安装
  8. > Accept & 安装Dart
  10. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/1292297/1617169939153-73c1715b-8791-40c7-a751-6ca8a750b915.png#align=left&display=inline&height=220&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1066&originWidth=1199&size=134595&status=done&style=none&width=248)
  12. - 重启
  14. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/1292297/1617169972444-6ebb5eaf-bde1-499c-8d20-18578c38c09c.png#align=left&display=inline&height=149&margin=%5Bobject%20Object%5D&name=image.png&originHeight=297&originWidth=1199&size=31596&status=done&style=none&width=599.5)
  16. - 快捷入口 出现 创建 flutter project
  18. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/1292297/1617170041576-cf5c80c7-5008-497b-b33b-c3fb38a26d74.png#align=left&display=inline&height=162&margin=%5Bobject%20Object%5D&name=image.png&originHeight=397&originWidth=600&size=27101&status=done&style=none&width=245)
  19. <a name="5UwVc"></a>
  20. ## 1.7 create Flutter Project
  22. - 选择 Application 创建App
  24. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/1292297/1617170269793-f3d5b8f3-60ae-4bfc-bd88-441f9ef9ed9d.png#align=left&display=inline&height=32&margin=%5Bobject%20Object%5D&name=image.png&originHeight=63&originWidth=1251&size=5370&status=done&style=none&width=625.5)
  26. - Package name
  27. > 格式: com.[域名].[Project Name处理后]
  28. > 域名不能为默认的example,否则创建过程会失败
  30. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/1292297/1617172017835-15fbd0e8-ea3f-4322-bee9-e48aa6fbe343.png#align=left&display=inline&height=120&margin=%5Bobject%20Object%5D&name=image.png&originHeight=240&originWidth=675&size=14433&status=done&style=none&width=337.5)<br />创建完成后会默认打开此项目
  32. - 重新在本窗口打开项目,第一次打开会下载Gradle包
  33. > C:\Users\admin\.gradle\wrapper\dists\gradle-6.3-all
  36. <a name="sFt8h"></a>
  37. ## 1.8 手机对应的 sdk 版本必须安装
  38. Tools -> SDK Manager -> 安装需要的Android版本
  40. <a name="XeRPu"></a>
  41. # 二、Mac
  43. <a name="qWPea"></a>
  44. # 三、调试、VS Code
  45. <a name="QEO24"></a>
  46. ## 3.1 Flutter Android 真机调试
  47. 必备条件：<br /> 1、准备一台 Android 手机 2、手机需要开启调试模式 3、用数据线把手机连上电脑 4、手机要允许电脑进行 Usb 调试 5、手机对应的 sdk 版本必须安装 <br />注意：<br /> 1、关闭电脑上面的手机助手比如：360 手机助手、应用宝等占用 adb 端口的软件 2、关闭 HBuilder 之类占用 Adb 端口的软件 3、数据线一定要可用（可以用 360 手机助手检测）
  48. <a name="3QuzB"></a>
  49. ## 3.2 Flutter 虚拟机模拟器调试
  50. 必备条件： <br />1、准备虚拟机模拟器，虚拟机模拟器可以是 Android Studio 自带的模拟器，也可以是 第三方模拟器。我们推荐使用第三方模拟器。因为第三方模拟器好安装，并且运行速度快 2、模拟器安装好后需要打开 3、推荐使用夜神模拟器：[https://www.yeshen.com/](https://www.yeshen.com/)<br />注意：<br /> 4、关闭电脑上面的手机助手比如：360 手机助手、应用宝等占用 adb 端口的软件 5、关闭 HBuilder 之类占用 Adb 端口的软件
  52. <a name="jJ0uv"></a>
  53. ## 3.3 Vscode 中开发运行 Flutter 应用
  54. 如果你习惯用 Android Studio 的话可以直接用 Android Studio 直接开发 Flutter。但是 Android Studio 比较耗费电脑资源，所以这里我们推荐使用 Vscode<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/1292297/1617175489126-a2c311e6-159a-4150-aaa7-5450901aa866.png#align=left&display=inline&height=576&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1152&originWidth=2006&size=250820&status=done&style=none&width=1003)
  55. <a name="kqek8"></a>
  56. ### 3.3.1 Vscode 中安装 Flutter 插件 Dart 插件。
  57. Plugins: Dart、Flutter、Flutter Widget Snippets、Awesome Flutter Snippets
  58. <a name="wJhIR"></a>
  59. ### 3.3.2 Vscode 中打开 flutter 项目进行开发
  60. [https://blog.csdn.net/u013491829/article/details/90177495](https://blog.csdn.net/u013491829/article/details/90177495)<br />[https://www.jianshu.com/p/37d45aff129c](https://www.jianshu.com/p/37d45aff129c)
  62. - 命令面板 -> Flutter: New Project -> 选择Application -> 输入项目名，即工程目录名 （此方法没有配置域名）
  63. - flutter run
  64. ```dart
  65. pub get不适用于flutter
  66. Packages get /flutter packages get：获取pubspec.yaml文件中列出的所有依赖包
  68. Packages upgrade/flutter packages upgrade：获取pubspec.yaml文件中列出的所有依赖包的最新版本
  70. Flutter upgrade：要同时更新Flutter SDK和你的依赖包
  72. flutter channel：查看flutter的SDK分支。
  74. flutter channel beta /flutter channel master：要切换分支
  76. flutter doctor：查看SDK的安装是否需要需要任何依赖来完成安装

3.3.3 运行 Flutter 项目 flutter run

终端输入：

  • flutter run 启动项目
  • r 键：点击后热加载，也就算是重新加载吧。
  • p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。
  • o 键：切换 android 和 ios 的预览模式。
  • q 键：退出调试预览模式。 
    1. Flutter run key commands.
    2. r Hot reload. 
    3. R Hot restart.
    4. h Repeat this help message.
    5. d Detach (terminate "flutter run" but leave application running).
    6. c Clear the screen
    7. q Quit (terminate the application on the device).

    3.3.4 Vscode 默认连不上第三方模拟器解决方案

    cd 到对应夜神模拟器 D:\Program Files\Nox\bin 目录
    然后运行 nox_adb.exe connect 127.0.0.1:62001