[[345418]]

使用流行的 Flutter 框架開始你的跨平臺(tái)開發(fā)之旅。

Flutter 是一個(gè)深受全球移動(dòng)開發(fā)者歡迎的項(xiàng)目。該框架有一個(gè)龐大的、友好的愛好者社區(qū)，隨著 Flutter 幫助程序員將他們的項(xiàng)目帶入移動(dòng)領(lǐng)域，這個(gè)社區(qū)還在繼續(xù)增長(zhǎng)。

本教程旨在幫助你開始使用 Flutter 進(jìn)行移動(dòng)開發(fā)。閱讀之后，你將了解如何快速安裝和設(shè)置框架，以便開始為智能手機(jī)、平板電腦和其他平臺(tái)開發(fā)。

本操作指南假定你已在計(jì)算機(jī)上安裝了 Android Studio，并且具有一定的使用經(jīng)驗(yàn)。

什么是 Flutter ？

Flutter 使得開發(fā)人員能夠?yàn)槎鄠€(gè)平臺(tái)構(gòu)建應(yīng)用程序，包括：

• Android
• iOS
• Web（測(cè)試版）
• macOS（正在開發(fā)中）
• Linux（正在開發(fā)中）

對(duì) macOS 和 Linux 的支持還處于早期開發(fā)階段，而 Web 支持預(yù)計(jì)很快就會(huì)發(fā)布。這意味著你可以立即試用其功能（如下所述）。

安裝 Flutter

我使用的是 Ubuntu 18.04，但其他 Linux 發(fā)行版安裝過(guò)程與之類似，比如 Arch 或 Mint。

使用 snapd 安裝

要使用 Snapd 在 Ubuntu 或類似發(fā)行版上安裝 Flutter，請(qǐng)?jiān)诮K端中輸入以下內(nèi)容：

$ sudo snap install flutter --classic
 
$ sudo snap install flutter –classic
flutter 0+git.142868f from flutter Team/ installed

然后使用 flutter 命令啟動(dòng)它。 首次啟動(dòng)時(shí)，該框架會(huì)下載到你的計(jì)算機(jī)上：

$ flutter
Initializing Flutter
Downloading https://storage.googleapis.com/flutter_infra[...]

下載完成后，你會(huì)看到一條消息，告訴你 Flutter 已初始化：

Flutter initialized

手動(dòng)安裝

如果你沒(méi)有安裝 Snapd，或者你的發(fā)行版不是 Ubuntu，那么安裝過(guò)程會(huì)略有不同。在這種情況下，請(qǐng)下載 為你的操作系統(tǒng)推薦的 Flutter 版本。

Install Flutter manually

然后將其解壓縮到你的主目錄。

在你喜歡的文本編輯器中打開主目錄中的 .bashrc 文件（如果你使用 Z shell，則打開 .zshc）。因?yàn)樗请[藏文件，所以你必須首先在文件管理器中啟用顯示隱藏文件，或者使用以下命令從終端打開它：

$ gedit ~/.bashrc &

將以下行添加到文件末尾：

export PATH="$PATH:~/flutter/bin"

保存并關(guān)閉文件。 請(qǐng)記住，如果在你的主目錄之外的其他位置解壓 Flutter，則 Flutter SDK 的路徑 將有所不同。

關(guān)閉你的終端，然后再次打開，以便加載新配置。 或者，你可以通過(guò)以下命令使配置立即生效：

$ . ~/.bashrc

如果你沒(méi)有看到錯(cuò)誤，那說(shuō)明一切都是正常的。

這種安裝方法比使用 snap 命令稍微困難一些，但是它非常通用，可以讓你在幾乎所有的發(fā)行版上安裝該框架。

檢查安裝結(jié)果

要檢查安裝結(jié)果，請(qǐng)?jiān)诮K端中輸入以下內(nèi)容：

flutter doctor -v

你將看到有關(guān)已安裝組件的信息。 如果看到錯(cuò)誤，請(qǐng)不要擔(dān)心。 你尚未安裝任何用于 Flutter SDK 的 IDE 插件。

Checking Flutter installation with the doctor command

安裝 IDE 插件

你應(yīng)該在你的 集成開發(fā)環(huán)境（IDE） 中安裝插件，以幫助它與 Flutter SDK 接口、與設(shè)備交互并構(gòu)建代碼。

Flutter 開發(fā)中常用的三個(gè)主要 IDE 工具是 IntelliJ IDEA（社區(qū)版）、Android Studio 和 VS Code（或 VSCodium）。我在本教程中使用的是 Android Studio，但步驟與它們?cè)?IntelliJ Idea（社區(qū)版）上的工作方式相似，因?yàn)樗鼈儤?gòu)建在相同的平臺(tái)上。

首先，啟動(dòng) Android Studio。打開 “Settings”，進(jìn)入 “Plugins” 窗格，選擇 “Marketplace” 選項(xiàng)卡。在搜索行中輸入 “Flutter”，然后單擊 “Install”。

Flutter plugins

你可能會(huì)看到一個(gè)安裝 “Dart” 插件的選項(xiàng)；同意它。如果看不到 Dart 選項(xiàng)，請(qǐng)通過(guò)重復(fù)上述步驟手動(dòng)安裝它。我還建議使用 “Rainbow Brackets” 插件，它可以讓代碼導(dǎo)航更簡(jiǎn)單。

就這樣！你已經(jīng)安裝了所需的所有插件。你可以在終端中輸入一個(gè)熟悉的命令進(jìn)行檢查：

flutter doctor -v

Checking Flutter plugins with the doctor command

構(gòu)建你的 “Hello World” 應(yīng)用程序

要啟動(dòng)新項(xiàng)目，請(qǐng)創(chuàng)建一個(gè) Flutter 項(xiàng)目：

1、選擇 “New -> New Flutter project”。

Creating a new Flutter plugin

2、在窗口中，選擇所需的項(xiàng)目類型。 在這種情況下，你需要選擇 “Flutter Application”。

3、命名你的項(xiàng)目為 hello_world。 請(qǐng)注意，你應(yīng)該使用合并的名稱，因此請(qǐng)使用下劃線而不是空格。 你可能還需要指定 SDK 的路徑。

Naming a new Flutter plugin

4、輸入軟件包名稱。

你已經(jīng)創(chuàng)建了一個(gè)項(xiàng)目！現(xiàn)在，你可以在設(shè)備上或使用模擬器啟動(dòng)它。

Device options in Flutter

選擇你想要的設(shè)備，然后按 “Run”。稍后，你將看到結(jié)果。

Flutter demo on mobile device

現(xiàn)在你可以在一個(gè) 中間項(xiàng)目 上開始工作了。

嘗試 Flutter for web

在安裝 Flutter 的 Web 組件之前，你應(yīng)該知道 Flutter 目前對(duì) Web 應(yīng)用程序的支持還很原始。 因此，將其用于復(fù)雜的項(xiàng)目并不是一個(gè)好主意。

默認(rèn)情況下，基本 SDK 中不啟用 “Flutter for web”。 要打開它，請(qǐng)轉(zhuǎn)到 beta 通道。 為此，請(qǐng)?jiān)诮K端中輸入以下命令：

flutter channel beta

flutter channel beta output

接下來(lái)，使用以下命令根據(jù) beta 分支升級(jí) Flutter：

flutter upgrade

flutter upgrade output

要使 “Flutter for web” 工作，請(qǐng)輸入：

flutter config --enable-web

重新啟動(dòng) IDE；這有助于 Android Studio 索引新的 IDE 并重新加載設(shè)備列表。你應(yīng)該會(huì)看到幾個(gè)新設(shè)備：

Flutter for web device options

選擇 “Chrome” 會(huì)在瀏覽器中啟動(dòng)一個(gè)應(yīng)用程序， “Web Server” 會(huì)提供指向你的 Web 應(yīng)用程序的鏈接，你可以在任何瀏覽器中打開它。

不過(guò)，現(xiàn)在還不是急于開發(fā)的時(shí)候，因?yàn)槟惝?dāng)前的項(xiàng)目不支持 Web。要改進(jìn)它，請(qǐng)打開項(xiàng)目根目錄下的終端，然后輸入：

flutter create

此命令重新創(chuàng)建項(xiàng)目，并添加 Web 支持。 現(xiàn)有代碼不會(huì)被刪除。

請(qǐng)注意，目錄樹已更改，現(xiàn)在有了一個(gè) web 目錄：

File tree with web directory

現(xiàn)在你可以開始工作了。 選擇 “Chrome”，然后按 “Run”。 稍后，你會(huì)看到帶有應(yīng)用程序的瀏覽器窗口。

Flutter web app demo

恭喜你！ 你剛剛為瀏覽器啟動(dòng)了一個(gè)項(xiàng)目，并且可以像其他任何網(wǎng)站一樣繼續(xù)使用它。

所有這些都來(lái)自同一代碼庫(kù)，因?yàn)?Flutter 使得幾乎無(wú)需更改就可以為移動(dòng)平臺(tái)和 Web 編寫代碼。

用 Flutter 做更多的事情

Flutter 是用于移動(dòng)開發(fā)的強(qiáng)大工具，而且它也是邁向跨平臺(tái)開發(fā)的重要一步。 了解它，使用它，并將你的應(yīng)用程序交付到所有平臺(tái)！