Flutter入门一——W7环境下使用VSCode配置Flutter开发环境(脱离Android Studio安装)

前言

想做一款app,看最近Flutter比较火,想拿来尝试一下。
没有过安卓开发的经验,之前一直做得是Web前端,这里将边学边记录自己从零开始的过程,坚持持续更新。
有不当之处,望大神们不啬赐教。

配置环境

基于Windows7上使用VSCode来配置Flutter。

需要配置的资源

JDK、Android SDK、Flutter SDK、VSCode。
下面就分享一下对这四个资源的配置,整个开发环境搭建完成后,热加载的体验,完成了这些就可以正式进入开发了。

JDK安装与环境变量配置

下载资源地址:https://www.oracle.com/techne...

  1. 下载后按提示安装
  2. 配置环境变量:JAVA_HOME,Path,CLASSPATH,此处不赘述,可以在网上查到很多教程
  3. 检测配置环境是否正确:java,javac,java -v这些命令,可以检测

Adroid SDK安装和环境变量配置

开发安卓需要Android SDK,现在我们不使用Android Studio,可以通过下载基本的Android命令行工具来完成相关配置

下载资源地址:https://developer.android.com...

  1. 将上面下载的压缩包解压缩到某个目录下(我放在 D:android_sdk),得到一个tools文件夹,里面有我们需要的命令行工具。
  2. 进入toolsbin,找到SDKManager.bat,我们按住shift键+右键这个目录的空白处,点击在此处打开命令提示符窗口。
  3. 输入sdk按Tab键补全,然后加 --list。可以看到一大堆项目。
  4. 我们使用命令行:.sdkmanager.bat "你要下载的包名"

       下载以下几个我们需要的项目:
       build-tools;xxxxxx 平台构建工具
       platform-tools 平台工具集
       platforms;android-xx 哪个APIs 对应构建工具
       patcher;v4 补丁包
       extras;intel;Hardware_Accelerated_Execution_Manager PC硬件加速相关
       emulator 模拟器 (可选 如果你打算直连手机的话就不需要)
       system-images;android-xx;google_apis_playstore;x86 如果你用模拟器就需要一个系统镜像
    
    
  5. 配置环境
    ANDROID_HOME、ANDROID_SDK
    图片描述

Flutter安装和配置

下载资源地址:https://flutter.io/docs/devel...

  1. 由于国内访问Flutter可能会受到限制,Flutter官网给中国开发者提供了临时镜像,我们把下面的环境变量添加到用户环境里,就可以获取临时镜像,如果的话,应该设置不设置都无法所谓。
    PUB_HOSTED_URL=https://pub.flutter-io.cn
    FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
  2. 将安装包解压到你想安装的Flutter_SDK路径下(我放在C:srcflutter下)
  3. 在Flutter安装目录的flutter文件下找到flutter_console.bat,双击运行病启动flutter命令行,接下来你就可以在flutter命令行运行flutter命令了
  4. 配置环境
    Path后追加flutterbin的全目录,重启windows应用次更改
  5. 使用flutter doctor命令行可以检测环境是否准备充分,按照运行后给出的提示来补充依赖

VSCode安装和配置

这里可以参考此处:https://flutterchina.club/get...

  1. 调用 View>Command Palette…Flutter入门一——W7环境下使用VSCode配置Flutter开发环境(脱离Android Studio安装)_第1张图片
  2. 输入 ‘install’, 然后选择 Extensions: Install Extension actionFlutter入门一——W7环境下使用VSCode配置Flutter开发环境(脱离Android Studio安装)_第2张图片
  3. 在搜索框输入 flutter , 在搜索结果列表中选择 ‘Flutter’, 然后点击 InstallFlutter入门一——W7环境下使用VSCode配置Flutter开发环境(脱离Android Studio安装)_第3张图片
  4. 安装后重启VSCode

编写第一个Flutter应用

此处没有什么难处,官网给出了详细的步骤:https://flutterchina.club/get...

我遇到的问题:没有安装模拟器,需要事先安装一下,然后在vscode的右下角点击No devices进行模拟器配置,可以使用Debugger调试开发,也可使用fultter run之后R进行热加载。下面就可以进入开发了。
Flutter入门一——W7环境下使用VSCode配置Flutter开发环境(脱离Android Studio安装)_第4张图片


有记录的不详细不正确的地方,欢迎留言互相探讨。

你可能感兴趣的:(flutter,windows-7)