1.4 配置Flutter開發(fā)環(huán)境

Flutter SDK配置完成后，還需要配置編程環(huán)境，在Flutter中可選擇多種編程環(huán)境，比如功能強(qiáng)大的Android Studio IDE，以及輕量快速的Visual Studio Code編輯器。除此之外，還有在線Flutter編輯器，可以隨時(shí)進(jìn)行編程練習(xí)，非常方便。下面將分別進(jìn)行介紹。

1.4.1 使用Android Studio進(jìn)行Flutter開發(fā)

Android Studio是由Google推出的官方Android開發(fā)IDE，專門用于An-droid原生開發(fā)。安裝官方推出的Flutter插件之后，Android Studio便具備了Flutter開發(fā)能力，變身為一款強(qiáng)大的Flutter開發(fā)IDE。

Android Studio底層基于JetBrains的Intellij IDE二次封裝，這是一款功能強(qiáng)大的IDE，尤其是在開發(fā)復(fù)雜的商業(yè)項(xiàng)目時(shí)，它的開發(fā)與重構(gòu)能力非常強(qiáng)大。安裝Flutter插件后，Android Stu-dio全面整合了Flutter開發(fā)相關(guān)功能，包括代碼提示、調(diào)試運(yùn)行、重構(gòu)等，對(duì)于復(fù)雜Flutter項(xiàng)目來說選擇使用Android Studio進(jìn)行開發(fā)也是絕佳選擇。

1 Android Studio安裝Flutter插件

Android Studio支持Windows、macOS、Linux多平臺(tái)，其官方網(wǎng)址為https://developer.an-droid.com/studio，打開網(wǎng)頁(yè)后可根據(jù)自身平臺(tái)進(jìn)行下載安裝。

安裝完成后運(yùn)行Android Studio，會(huì)進(jìn)入歡迎界面，如圖1-11所示。

從圖1-11中可以看到，有一個(gè)Start a new Flutter project按鈕，用于創(chuàng)建Flutter工程。未安裝Flutter插件的Android Studio是沒有這個(gè)按鈕的，由于作者已經(jīng)安裝了Flutter插件，因此這個(gè)按鈕才會(huì)出現(xiàn)。

下面介紹如何安裝Flutter插件。單擊右下角的Configure按鈕，選擇Plugins，在打開的Plugins窗口中，選擇Marketplace，并搜索flutter關(guān)鍵字，在搜索結(jié)果中找到Flutter組件并進(jìn)行安裝，如圖1-12所示。插件安裝完成后會(huì)提示重啟IDE，單擊重啟IDE按鈕，再次啟動(dòng)時(shí)即可看到Start a new Flutter project按鈕。

安裝完Flutter插件后，使用Android Studio進(jìn)行Flutter開發(fā)的效果如圖1-13所示。從圖中可以看到Android Studio的功能非常強(qiáng)大，F(xiàn)lutter插件對(duì)Android Studio進(jìn)行了全面定制，提供了許多Flutter專屬功能，能夠進(jìn)一步提高開發(fā)效率。

2 Android Studio安裝Android SDK

用Flutter開發(fā)Android應(yīng)用，需要安裝Android SDK。在Android Studio中可以方便地管理和安裝不同版本的Android SDK。

在Android Studio歡迎界面中，單擊Configure按鈕，在彈出菜單中選擇SDK Manager會(huì)彈出設(shè)置窗口，在窗口中可勾選所需的Android SDK版本進(jìn)行安裝，具體如圖1-14所示。

除了在Android Studio的歡迎界面打開SDK Manager之外，還可以進(jìn)入IDE主界面中，從工具欄上進(jìn)行訪問，或者通過設(shè)置菜單進(jìn)行訪問。

1.4.2 使用Visual Studio Code進(jìn)行Flutter開發(fā)

Visual Studio Code是目前最為流行的代碼編輯器之一，F(xiàn)lutter也支持使用它進(jìn)行開發(fā)，同樣也是基于插件擴(kuò)展實(shí)現(xiàn)。下面介紹如何為Visual Studio Code添加Flutter支持。

首先打開Visual Studio Code，在左側(cè)打開擴(kuò)展Tab，在搜索框中輸入flutter關(guān)鍵字，選擇Flutter插件并安裝，具體如圖1-15所示。

Visual Studio Code的Flutter插件也帶來了Flutter開發(fā)功能深度整合，包括代碼提示、編譯運(yùn)行、代碼重構(gòu)等。Visual Studio Code也是實(shí)際工作中常用的Flutter開發(fā)工具，并且具備占用資源少的優(yōu)點(diǎn)。

使用Visual Studio Code進(jìn)行Flutter開發(fā)的實(shí)際效果如圖1-16所示。從圖中可以看出，Visual Studio Code的界面相較于Android Studio要簡(jiǎn)潔許多，這并不意味開發(fā)功能弱，實(shí)際上它的Flutter開發(fā)能力也是非常強(qiáng)大的。

1.4.3 使用在線環(huán)境進(jìn)行Flutter開發(fā)

除了本地開發(fā)環(huán)境之外，還有一些在線開發(fā)環(huán)境，雖然功能有限，但對(duì)于熟悉Dart語言特性，快速驗(yàn)證一些簡(jiǎn)單的Flutter布局還是非常好用的。

首先介紹Dart在線運(yùn)行環(huán)境，其網(wǎng)址為https://dart.dev/#try-dart，打開后頁(yè)面分為兩個(gè)部分，左側(cè)為代碼編輯器，可以輸入Dart代碼，右側(cè)為運(yùn)行按鈕和命令行輸出，用于執(zhí)行代碼并打印結(jié)果。網(wǎng)頁(yè)的運(yùn)行效果如圖1-17所示。

接下來介紹Flutter在線運(yùn)行環(huán)境，網(wǎng)址為https://dartpad.dev/，在這個(gè)網(wǎng)站中可以在線開發(fā)Flutter應(yīng)用，單擊運(yùn)行按鈕能夠立刻預(yù)覽效果。對(duì)于Flutter初學(xué)者來說，可以在這個(gè)網(wǎng)站上邊學(xué)邊練，非常方便。網(wǎng)頁(yè)的運(yùn)行效果如圖1-18所示。