Flutter(二)之環境搭建

coderwhy發表於2019-09-04

前言:接下來一段時間我會陸續更新一些列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、資料結構與演算法等等,也會更新一些自己的學習心得等,歡迎大家關注

公眾號

相關文章