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目錄拖入到應用程序中，將其看成個人一個應用（我的習慣而已）

2.配置Flutter的環境變量

• 由於咱們以後須要在命令行執行Flutter的命令，因此須要配置環境變量

macOS或者Linux系統，須要編輯~/.bash_profile文件

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

Windows用戶將所在路徑添加到環境變量的Path下

• Windows環境變量修改：點擊計算機圖標 - 屬性 - 高級系統設置 - 高級 - 環境變量
• 找到Path，在其中添加Flutter SDK目錄下bin目錄

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

配置鏡像

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的版本，須要手動去下載

• 進入developer.apple.com/download/mo…頁面
• 登陸本身的Apple ID
• 在搜索框輸入Xcode，回車搜索，找到各類版本Xcode下載便可

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

選擇本身想用的iOS模擬器

打開Xcode，右上角點擊Xcode - Open Developer Tools - Simulator

這個時候會打開一個默認的iOS模擬器，也能夠在Hardware - Device - 系統版本中選擇本身想要測試的模擬器

這個時候，咱們就能看到以下模擬器了

這個時候咱們執行一下以下終端命令：

flutter doctor
複製代碼

看到以下有一個

1.4. 配置Android環境

若是想爲Flutter配置Android開發環境，須要在咱們的電腦上安裝一個Android Studio

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

Android Studio的下載

• 官網地址：developer.android.com/studio/?utm…
• 直接在官方下載便可
• 安裝直接雙擊安裝便可

Android的環境配置

打開Android Studio，會問咱們是否要設置代理，這是由於下載Android SDK等在國內很差下載

• 至於如何設置代理，這裏就再也不講解了~~~
• 最好要設置代理哦，否則估計會被氣死~~~

以後各類下一步，就會幫咱們安裝SDK等相關須要使用的內容

安裝好後，點擊Finish便可。

建立Android模擬器

安裝好後，咱們就能夠去建立模擬器：選擇Configure - AVD Manger

選擇create virtual device

選擇一個你想用的設備

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

• 下一個界面，點擊accept - next就能夠了

接着下一步，給本身的模擬器起個名字

啓動Android模擬器

這個時候咱們執行一下以下終端命令：

flutter doctor
複製代碼

看到以下有兩個可用的設備

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
# 注意：後面的名稱不能由特殊符號，也不能由大寫
複製代碼

2.2. 項目跑在模擬器

經過一個你喜歡的開發工具打開（我這裏暫時選擇Android Studio）

選擇你要啓動的設備，點擊 運行 按鈕：

我把項目運行在了兩個模擬器上

2.3. 體驗Flutter熱重載

對於咱們開發測試階段，若是每次修改代碼都須要從新編譯整個項目再加載的話，那每次可能都須要花費10秒左右甚至是幾分鐘的時間（電腦太慢的話），這樣的開發效率是很是低的。

如今前端開發都支持熱重載（Hot Reload），能夠大大加快咱們的開發效率。

• 熱重載能夠在無需從新編譯代碼、從新啓動應用程序的狀況下，看到修改後界面的效果

Flutter在開發階段使用JIT編譯模式（後面我會講解什麼是JIT模式），因此能夠作到熱重載來提升咱們的開發效率

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

將下面紅框中的內容改爲Hello Flutter，保存一下應用程序

• 你會發如今不到1秒鐘內，界面直接發生了刷新
• 而且沒有應用程序沒有進行任何的從新，效率很是高

若是熱重載不起做用，咱們也能夠點擊右上角的 Hot Restart，並不須要從新運行項目

2.4. 工程目錄分析

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

目錄包含哪些東西呢？

• 其中包含Flutter開發和測試須要的lib、test，在開發過程當中，咱們主要使用的就是lib目錄
• 另一些是管理項目的配置文件信息等，固然也包括一些Git相關的文件
• 除此以外，還包括一個Android子工程和iOS子工程

爲何包含Android子工程和iOS子工程呢？

• 這是由於做爲一個跨平臺的開發方案，最終仍是要嵌入到Android工程或者iOS工程中來運行的
• 而且在開發過程當中也須要調用原生的一些功能

備註：全部內容首發於公衆號，以後除了Flutter也會更新其餘技術文章，TypeScript、React、Node、數據結構與算法等等，也會更新一些本身的學習心得等，歡迎你們關注