Flutter(二)之環境搭建

coderwhy發表於2019-09-04
Flutter

前言：接下來一段時間我會陸續更新一些列Flutter文字教程

更新進度： 每週至少兩篇；

更新地點： 首發於公眾號，第二天更新於掘金、思否等地方；

更多交流： 可以新增我的微信 372623326，關注我的微博：coderwhy

希望大家可以 幫忙轉發，點選在看，給我更多的創作動力。

Hello Flutter

這個章節我們學習如何安裝Flutter，並且寫第一個Flutter程式。

之後在iOS模擬器和Android模擬器上分別跑起來我們的應用程式（之後我會講解如何跑在真機上）。

當然，這個程式中的很多程式碼你可能並不是特別理解，裡面涉及到一些dart知識，也涉及到一些flutter的東西。這些都沒有關係，我們的目的是把這個工程跑起來，就表示你的環境是OK的。

一. 環境搭建

環境搭建有點麻煩，特別是Android環境的安裝，大家耐心安裝，有任何問題可以新增我的微信 372623326

1.1. 作業系統選擇

很多同學會問，學習Flutter到底使用什麼作業系統呢？

**學習階段：**Windows或者macOS（蘋果作業系統）都是可以的

**開發階段：**一般需要使用macOS，因為我們需要針對iOS進行除錯，通常方便起見還是選擇macOS

**疑問：**如果以後做Flutter開發沒有macOS怎麼辦？

  • 這個可以完全放心，使用Flutter開發的公司必然會給你配備macOS的

Flutter可以在Windows上學習，也可以在macOS上，因為我之後的課程要進行Android和iOS的除錯，所以我當前使用的環境是macOS的。

這裡我再次強調，學習階段使用Windows是沒有任何問題，我之前也在Windows上寫過很多Flutter的東西！

在安裝的過程中，我也會說到很多Windows安裝的注意事項，大家按照步驟一步步完成即可。

1.2. 安裝Flutter SDK

使用Flutter開發，首先我們需要安裝一個Flutter的SDK。

下載Flutter的SDK

來到Flutter的官網網站，選擇最新穩定的Flutter SDK的版本

  • 網站地址：flutter.dev/docs/develo…
  • 選擇自己的作業系統和最新穩定的版本（Stable版本）（我當前最新穩定的版本是1.7.8）

安裝Flutter

1.解壓下載好的Flutter SDK

  • 這個在Windows和macOS都是一樣的（選擇一個自己想要安裝的目錄）
  • 但是在macOS中，我通常會講flutter目錄拖入到應用程式中，將其當作我的一個應用（個人習慣而已）

image-20190830102148741

2.配置Flutter的環境變數

  • 因為我們之後需要在命令列執行Flutter的命令，所以需要配置環境變數

macOS或者Linux系統，需要編輯~/.bash_profile檔案

export PATH=$PATH:/Applications/flutter/bin
複製程式碼

Windows使用者將所在路徑新增到環境變數的Path下

  • Windows環境變數修改：點選計算機圖示 - 屬性 - 高階系統設定 - 高階 - 環境變數
  • 找到Path，在其中新增Flutter SDK目錄下bin目錄

在終端中執行flutter --version，出現如下內容，說明安裝flutter成功

image-20190830113709884

配置映象

flutter專案會依賴一些東西，在國內下載這些依賴會有一些慢，所以我們可以將它們的安裝源換成國內的（也就是設定國內的映象）

macOS或者Linux作業系統，依然是編輯~/.bash_profile檔案

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter
複製程式碼

Windows使用者還是需要修改環境變數

  • Windows環境變數修改：點選計算機圖示 - 屬性 - 高階系統設定 - 高階 - 環境變數
  • 新建 變數 PUB_HOSTED_URL，其值為https://pub.flutter-io.cn
  • 新建 變數 FLUTTER_STORAGE_BASE_URL， 其值為https://storage.flutter-io.cn

注意： 此映象為臨時映象，並不能保證一直可用，大家可以參考詳情請參考 Using Flutter in China 以獲得有關映象伺服器的最新動態。

1.3. 配置iOS環境

如果想為Flutter配置iOS開發環境，需要在我們的電腦上安裝一個Xcode（此部分Windows電腦忽略）

  • Xcode是蘋果公司的iOS和macOS的IDE，進行過iOS開發的童鞋應該都非常熟悉

**如何安裝Xcode呢？**常見的是兩種

1.直接在App Store上搜尋Xcode，找到安裝即可

  • 這種安裝方式有一個缺點，安裝的一定是最新版本的（當然是用最新版本的最好）
  • 但是最新版本的Xcode會對macOS系統有一定的要求，所以可能還要設計到系統升級
  • 如果不希望系統升級，可以選擇第二種方式

2.第二種方式是安裝自己想要的Xcode的版本，需要手動去下載

開啟安裝好的Xcode，可能開啟速度有點慢：不著急，慢慢來

選擇自己想用的iOS模擬器

開啟Xcode，右上角點選Xcode - Open Developer Tools - Simulator

image-20190830115518030

這個時候會開啟一個預設的iOS模擬器，也可以在Hardware - Device - 系統版本中選擇自己想要測試的模擬器

image-20190830115719882

這個時候，我們就能看到如下模擬器了

Flutter(二)之環境搭建

這個時候我們執行一下如下終端命令：

flutter doctor
複製程式碼

看到如下有一個

image-20190830151021575

1.4. 配置Android環境

如果想為Flutter配置Android開發環境，需要在我們的電腦上安裝一個Android Studio

  • Android Studio是基於IntelliJ IDEA的、Google 官方的 Android 應用整合開發環境 (IDE)。

Android Studio的下載

Android的環境配置

開啟Android Studio，會問我們是否要設定代理，這是因為下載Android SDK等在國內不好下載

  • 至於如何設定代理，這裡就不再講解了~~~
  • 最好要設定代理哦，不然估計會被氣死~~~

image-20190830152535190

之後各種下一步，就會幫我們安裝SDK等相關需要使用的內容

image-20190830152715874

安裝好後，點選Finish即可。

建立Android模擬器

安裝好後，我們就可以去建立模擬器：選擇Configure - AVD Manger

image-20190830153436419

選擇create virtual device

image-20190830153549326

選擇一個你想用的裝置

image-20190830153820771

選擇Android的版本（這裡我沒有選擇Q版本，它目前還是一個bata版本），點選download

  • 下一個介面，點選accept - next就可以了

image-20190830154008864

接著下一步，給自己的模擬器起個名字

image-20190830155635699

啟動Android模擬器

image-20190830162101035

這個時候我們執行一下如下終端命令：

flutter doctor
複製程式碼

看到如下有兩個可用的裝置

image-20190830162536667

1.5. 開發工具的選擇

官方推薦兩個工具來開發Flutter：Android Studio 和 VSCode，我們選擇哪一個呢？

對於有選擇恐懼症的人，還真不是特別好選擇，所以下面我會分別說出它們的優缺點，選擇權在你

最後我也會給出我的選擇

VSCode優缺點

VSCode是最近非常非常流行的開發工具，並且非常好用！（我之前在微博感慨微軟的東西最近兩年越來越好用，其中之一就是VSCode）

而且VSCode最近已經有取代WebStorm作為前端首選開發工具的趨勢了

VSCode的優點：

  • VSCode其實並不能稱之為是一個IDE，它只是一個編輯器而已。
  • 所以它非常的輕量級，不會佔用你非常大的記憶體消耗，而且啟動速度等都非常快，對於電腦配置不是特別高的同學，肯定是一個非常好的選擇。
  • 並且你可以在VSCode上安裝各種各樣的外掛來滿足自己的開發需求。

VSCode的缺點：

  • 很多Android Studio包括的方便操作沒有，比如點選啟動、熱更新點選等；
  • 而且在某些情況下會出現一些問題；
  • 比如之前我在使用的過程中，有時候熱更新不及時常常看不到效果，必須重啟；
  • 比如某些情況下，沒有程式碼提示不夠靈敏；

使用須知：

使用VSCode開發Flutter我們需要安裝兩個外掛：Flutter和Dart

Android Studio優缺點

對於進行過Android開發或者使用過Webstorm、IDEA、PHPStorm等的同學，使用Android Studio肯定是沒有任何問題的

Android Studio的優點：

  • 整合開發環境（IDE）不用多說，你需要的功能基本都有
  • 而且上面說的VSCode存在的問題，在Android Studio中基本不會出現

Android Studio的缺點：

  • 一個字：重
  • 無論是IDE本身，還是使用Android Studio啟動專案，都會相對慢一些
  • 佔據的計算機資源也很多，所以電腦配置較低是會出現卡頓

使用須知：

使用Android Studio開發Flutter我們需要安裝兩個外掛：Flutter和Dart

我的選擇

其實在兩個之間到底如何選擇對於童鞋們學習Flutter更好，我也是糾結了很久。

  • 在我之前使用Flutter的過程中（寫這個教程之前），我使用的都是VSCode。
  • 但是對於初學者來說，學習Flutter的過程中，Android Studio會更加友好。
  • 如果之後出視訊教程，我可以設立一個投票，讓大家決定使用的開發工具。

不過，無論使用哪個工具，都只是輔助而已，重要的還是我們課程的內容。

那麼，我是如何選擇 開發工具 呢？

  • 在學習Dart語言過程中，我選擇VSCode，因為它可以直接建立一個dart檔案讓我們進行學習
  • 在學習Flutter過程中，我選擇Android Studio，因為各種整合使用起來更加方便（你繼續使用VSCode沒有任何問題）

二. Hello Flutter

接下來我們建立自己的第一個Flutter應用程式，並且將其跑在兩個模擬器上

2.1. 建立Flutter應用

有兩種方式建立Flutter應用：通過終端，通過編輯器。

這裡我先選擇通過終端（Windows和macOS都是一樣的命令）

開啟終端 - 執行如下命令：

flutter create helloflutter
# 注意：後面的名稱不能由特殊符號，也不能由大寫
複製程式碼

image-20190830165411126

2.2. 專案跑在模擬器

通過一個你喜歡的開發工具開啟（我這裡暫時選擇Android Studio）

image-20190830165738248

選擇你要啟動的裝置，點選 執行 按鈕：

image-20190830170112928

我把專案執行在了兩個模擬器上

image-20190830170814213

2.3. 體驗Flutter熱過載

對於我們開發測試階段，如果每次修改程式碼都需要重新編譯整個專案再載入的話，那每次可能都需要花費10秒左右甚至是幾分鐘的時間（電腦太慢的話），這樣的開發效率是非常低的。

現在前端開發都支援熱過載（Hot Reload），可以大大加快我們的開發效率。

  • 熱過載可以在無需重新編譯程式碼、重新啟動應用程式的情況下，看到修改後介面的效果

Flutter在開發階段使用JIT編譯模式（後面我會講解什麼是JIT模式），所以可以做到熱過載來提高我們的開發效率

下面我們體會一下熱過載，後面有時間我們來分析熱過載是如何實現的

將下面紅框中的內容改成Hello Flutter，儲存一下應用程式

  • 你會發現在不到1秒鐘內，介面直接發生了重新整理
  • 並且沒有應用程式沒有進行任何的重新，效率非常高

image-20190830172702931

如果熱過載不起作用，我們也可以點選右上角的 Hot Restart，並不需要重新執行專案

image-20190830173033311

2.4. 工程目錄分析

Flutter工程建立完畢會，會感覺比較複雜，我們來看下圖：

image-20190830223134010

目錄包含哪些東西呢？

  • 其中包含Flutter開發和測試需要的lib、test，在開發過程中，我們主要使用的就是lib目錄
  • 另外一些是管理專案的配置檔案資訊等，當然也包括一些Git相關的檔案
  • 除此之外，還包括一個Android子工程和iOS子工程

為什麼包含Android子工程和iOS子工程呢？

  • 這是因為作為一個跨平臺的開發方案，最終還是要嵌入到Android工程或者iOS工程中來執行的
  • 並且在開發過程中也需要呼叫原生的一些功能

備註：所有內容首發於公眾號，之後除了Flutter也會更新其他技術文章，TypeScript、React、Node、資料結構與演算法等等，也會更新一些自己的學習心得等，歡迎大家關注

公眾號

相關文章