Flutter開發入門之開發環境搭建(VSCode搭建Flutter開發環境)

程式園中猿 發表於 2019-12-03

本文簡介

搭建基於Visual Studio Code(VsCode)的Flutter開發環境.

目標使用者:

Flutter初學者

操作步驟

一、下載並安裝Visual Studio Code

code.visualstudio.com/Download
預計耗時:3分鐘(按照500k/秒下載速度估計)

Flutter開發入門之開發環境搭建(VSCode搭建Flutter開發環境)

二、安裝外掛

  1. 安裝外掛Dart
    Flutter開發入門之開發環境搭建(VSCode搭建Flutter開發環境)
  2. 安裝外掛Flutter
    Flutter開發入門之開發環境搭建(VSCode搭建Flutter開發環境)

三、下載JDK8 64位

不能用最新的jdk版本,只能用jdk8 64位.

  1. 下載。預計耗時:10分鐘
    www.cr173.com/soft/79926.…
    也可以從oracle官方下載,但是要註冊oracle賬號。
  2. 安裝JDK並配置JAVA_HOME環境變數
    Flutter開發入門之開發環境搭建(VSCode搭建Flutter開發環境)

四、下載Flutter SDK

  1. 下載。預計耗時:20分鐘 flutter.dev/docs/get-st…
    Flutter開發入門之開發環境搭建(VSCode搭建Flutter開發環境)
  2. 解壓檔案並將flutter的bin目錄加入到環境變數中
    Flutter開發入門之開發環境搭建(VSCode搭建Flutter開發環境)

五、接受安卓Licensse

執行如下命令,然後遇到需要的輸入的地方,輸入y然後回車。

flutter doctor --android-licenses
複製程式碼

六、建立工程

  1. 完成上面步驟後,先重啟一下VsCode
  2. 按下快捷鍵:Ctrl+Shift+p,然後輸入“flutter”,選擇“Flutter: New Project”
    Flutter開發入門之開發環境搭建(VSCode搭建Flutter開發環境)
  3. 輸入工程名稱,然後選擇存放目錄(注意不要放在flutter sdk目錄下)
    Flutter開發入門之開發環境搭建(VSCode搭建Flutter開發環境)

七、執行工程

  1. 按F5快捷鍵,選擇“Dart&Flutter”
    Flutter開發入門之開發環境搭建(VSCode搭建Flutter開發環境)
  2. 選擇待執行裝置(如果沒有可執行裝置,就點選“Create Android emulator”建立一個)
    Flutter開發入門之開發環境搭建(VSCode搭建Flutter開發環境)

八、執行效果圖

Flutter開發入門之開發環境搭建(VSCode搭建Flutter開發環境)