[[345418]]

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

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

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

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

什么是 Flutter ？

Flutter 使得開發(fā)人員能夠為多個平臺構(gòu)建應(yīng)用程序，包括：

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

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

安裝 Flutter

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

使用 snapd 安裝

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

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

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

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

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

Flutter initialized

手動安裝

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

Install Flutter manually

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

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

$ gedit ~/.bashrc &

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

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

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

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

$ . ~/.bashrc

如果你沒有看到錯誤，那說明一切都是正常的。

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

檢查安裝結(jié)果

要檢查安裝結(jié)果，請在終端中輸入以下內(nèi)容：

flutter doctor -v

你將看到有關(guān)已安裝組件的信息。 如果看到錯誤，請不要擔(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ā)中常用的三個主要 IDE 工具是 IntelliJ IDEA（社區(qū)版）、Android Studio 和 VS Code（或 VSCodium）。我在本教程中使用的是 Android Studio，但步驟與它們在 IntelliJ Idea（社區(qū)版）上的工作方式相似，因為它們構(gòu)建在相同的平臺上。

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

Flutter plugins

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

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

flutter doctor -v

Checking Flutter plugins with the doctor command

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

要啟動新項目，請創(chuàng)建一個 Flutter 項目：

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

Creating a new Flutter plugin

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

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

Naming a new Flutter plugin

4、輸入軟件包名稱。

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

Device options in Flutter

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

Flutter demo on mobile device

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

嘗試 Flutter for web

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

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

flutter channel beta

flutter channel beta output

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

flutter upgrade

flutter upgrade output

要使 “Flutter for web” 工作，請輸入：

flutter config --enable-web

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

Flutter for web device options

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

不過，現(xiàn)在還不是急于開發(fā)的時候，因為你當(dāng)前的項目不支持 Web。要改進(jìn)它，請打開項目根目錄下的終端，然后輸入：

flutter create

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

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

File tree with web directory

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

Flutter web app demo

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

所有這些都來自同一代碼庫，因為 Flutter 使得幾乎無需更改就可以為移動平臺和 Web 編寫代碼。

用 Flutter 做更多的事情

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