Flutter安裝、配置、初體驗 windows 版

LetsGoCena發表於2019-06-18

Flutter安裝、配置、初體驗 windows 版

作為一名合格的開發人員,我們應該積極地去擁抱新的事物,當然這個想法也不限於技術,加油!

Flutter 瞭解一下

Flutter是谷歌的移動UI框架,可以快速在iOS和Android上構建高質量的原生使用者介面。 Flutter可以與現有的程式碼一起工作。在全世界,Flutter正在被越來越多的開發者和組織使用,並且Flutter是完全免費、開源的。瞭解更多

Flutter用什麼語言開發?

採用了Dart作為開發框架和widget的語言。底層圖形框架和Dart虛擬機器在C /C++中實現。 更多問題,更多思考!

接下來~ 安裝 Flutter, get it!!

Flutter安裝、配置、初體驗 windows 版

列一個安裝清單

  1. Flutter SDK
  2. Dart
  3. Android Studio
  4. Android Studio Flutter 外掛
  5. Android 虛擬機器
  6. vscode Flutter 外掛

Flutter SDK 安裝配置 Dart 安裝

這一步呢! 其實~

Dart 安裝程式 下載地址: www.gekorm.com/dart-window… Flutter SDK 下載地址: flutter.dev/docs/develo…

Dart 安裝~

  • 直接跟著安裝導向走就可以了,如果出現網路錯誤,那你就需要那啥了

Flutter安裝、配置、初體驗 windows 版

Flutter 安裝~

  1. 將下載的壓縮包解壓到你自己目錄
  2. 在根目錄下找到 flutter_console.bat 開啟它,輸入 flutter --version 可以看到版本資訊即我們下載的包沒問題
  3. 然後在配置一下系統的環境變數, 到這一步我們的 Flutter 就算安裝完成了~
  4. 再輸入 flutter doctor 檢查一下,還有什麼問題~

等等,這……

Flutter安裝、配置、初體驗 windows 版

這說明我們還缺少一些依賴~

再輸入 flutter doctor --android-licenses 根據提示一路 yes 這是為了安裝一些證書……

接下在我們就需要安裝 Android Studio虛擬機器

Android Studio 安裝配置 Flutter 環境

Android Studio 下載地址: developer.android.google.cn/studio/

Android Studio 按照安裝導向一步一步走即可~

Flutter安裝、配置、初體驗 windows 版

安裝 Flutter 外掛

Flutter安裝、配置、初體驗 windows 版

安裝完成後再重啟一下 IDE

Flutter安裝、配置、初體驗 windows 版

到這來我們就可以建立我們的 Flutter 專案了

Flutter安裝、配置、初體驗 windows 版

根據提示 建立一個 Flutter 專案,這個時候還不能執行,它會提示我們沒有虛擬機器,需要安裝我們的虛擬機器來除錯我們的 Flutter 專案

再次輸入 flutter doctor 檢查一下 Flutter

沒有檢測到任何虛擬機器裝置,另外我們可以看到Android Studio安裝成功了

Flutter安裝、配置、初體驗 windows 版

安裝 虛擬機器

Flutter安裝、配置、初體驗 windows 版

選擇一個機型,我選擇的是 pixel 2 然後根據提示 缺什麼下載什麼 即可,這個過程會比較久;各位小夥伴一定要耐心等待啊

Flutter安裝、配置、初體驗 windows 版

tips: 記下這個虛擬機器的名字,下面有用,(名字可以隨意起)

如果你也遇到這個問題的話~ 那麼你的 CUP 要開啟支援虛擬化 解決方法:進入你的電腦主機板 BIOS 找到 Intel Virtual Technology 選項 設定為 Enabled

Flutter安裝、配置、初體驗 windows 版

開啟這個後就可以開啟一個虛擬機器了

Flutter安裝、配置、初體驗 windows 版

告別用 Android Studio 開啟虛擬機器

建立一個系統指令碼,快速開啟 虛擬機器 告別 Android Studio, 讓 vscode C 位出道~

新建一個字尾名位 .bat 的檔案 如:emulator.bat, 寫入一下內容

tips: 有可能你的 emulator.exe 路徑不一樣

C:\Users\ce\AppData\Local\Android\Sdk\emulator\emulator.exe -netdelay none -netspeed full -avd Pixel2API28
複製程式碼

-avd Pixel2API28 這個是你的虛擬機器的名字

儲存,不出意外雙擊它就可以開啟虛擬機器了;

Flutter安裝、配置、初體驗 windows 版

走到這一步離我們 成功已經走過 90% 了

Flutter安裝、配置、初體驗 windows 版

配置 vscode 支援 Flutter 開發環境,除錯一下

安裝 Flutter 外掛

  • 開啟虛擬機器
  • 開啟命令列工具輸入 flutter create my_flutter_app 建立專案
  • vs code 開啟 專案
  • 再輸入 flutter run

Flutter安裝、配置、初體驗 windows 版

到這裡就成功配置完成了

Flutter安裝、配置、初體驗 windows 版

各位同仁這一步只是萬里長征的第一步,接下來還有漫長的路要走,Flutter 現在搭建環境還是有點麻煩,相信以後一定會有更好的辦法,拭目以待。

如有疑問歡迎來訪: cjp96@qq.com

coding is intersting, this man is Roman Reigns

Flutter安裝、配置、初體驗 windows 版

相關文章