使用 Flutter 創建 App
導讀：使用流行的 Flutter 框架開始你的跨平台開發之旅。
本文字數：3591，閱讀時長大約：5分鐘
https://linux.cn/article-12693-1.html
作者：Vitaly Kuprenko
譯者：XianLei Gao
Flutter
是一個深受全球移動開發者歡迎的項目。該框架有一個龐大的、友好的愛好者社區，隨著 Flutter 幫助程序員將他們的項目帶入移動領域，這個社區還在繼續增長。
本教程旨在幫助你開始使用 Flutter 進行移動開發。閱讀之後，你將了解如何快速安裝和設置框架，以便開始為智能手機、平板電腦和其他平台開發。
本操作指南假定你已在計算機上安裝了Android Studio，並且具有一定的使用經驗。
什麼是 Flutter ？
Flutter 使得開發人員能夠為多個平台構建應用程序，包括：
??Android
??iOS
??Web（測試版）
??macOS（正在開發中）
??Linux（正在開發中）
對 macOS 和 Linux 的支持還處於早期開發階段，而 Web 支持預計很快就會發布。這意味著你可以立即試用其功能（如下所述）。
安裝 Flutter
我使用的是 Ubuntu 18.04，但其他 Linux 發行版安裝過程與之類似，比如 Arch 或 Mint。
使用 snapd 安裝
要使用Snapd在 Ubuntu 或類似發行版上安裝 Flutter，請在終端中輸入以下內容：
然後使用??命令啟動它。首次啟動時，該框架會下載到你的計算機上：
下載完成後，你會看到一條消息，告訴你 Flutter 已初始化：
Flutter initialized
手動安裝
如果你沒有安裝 Snapd，或者你的發行版不是 Ubuntu，那麼安裝過程會略有不同。在這種情況下，請下載為你的操作系統推薦的 Flutter 版本。
Install Flutter manually
然後將其解壓縮到你的主目錄。
在你喜歡的文本編輯器中打開主目錄中的??文件（如果你使用Z shell，則打開?）。因為它是隱藏文件，所以你必須首先在文件管理器中啟用顯示隱藏文件，或者使用以下命令從終端打開它：
將以下行添加到文件末尾：
保存並關閉文件。請記住，如果在你的主目錄之外的其他位置解壓 Flutter，則Flutter SDK 的路徑將有所不同。
關閉你的終端，然後再次打開，以便載入新配置。或者，你可以通過以下命令使配置立即生效：
如果你沒有看到錯誤，那說明一切都是正常的。
這種安裝方法比使用??命令稍微困難一些，但是它非常通用，可以讓你在幾乎所有的發行版上安裝該框架。
檢查安裝結果
要檢查安裝結果，請在終端中輸入以下內容：
你將看到有關已安裝組件的信息。如果看到錯誤，請不要擔心。你尚未安裝任何用於 Flutter SDK 的 IDE 插件。
Checking Flutter installation with the doctor command
安裝 IDE 插件
你應該在你的集成開發環境（IDE）中安裝插件，以幫助它與 Flutter SDK 介面、與設備交互並構建代碼。
Flutter 開發中常用的三個主要 IDE 工具是 IntelliJ IDEA（社區版）、Android Studio 和 VS Code（或VSCodium）。我在本教程中使用的是 Android Studio，但步驟與它們在 IntelliJ Idea（社區版）上的工作方式相似，因為它們構建在相同的平台上。
首先，啟動 Android Studio。打開 「Settings」，進入 「Plugins」 窗格，選擇 「Marketplace」 選項卡。在搜索行中輸入 「Flutter」，然後單擊 「Install」。
Flutter plugins
你可能會看到一個安裝 「Dart」 插件的選項；同意它。如果看不到 Dart 選項，請通過重複上述步驟手動安裝它。我還建議使用 「Rainbow Brackets」 插件，它可以讓代碼導航更簡單。
就這樣！你已經安裝了所需的所有插件。你可以在終端中輸入一個熟悉的命令進行檢查：
Checking Flutter plugins with the doctor command
構建你的 「Hello World」 應用程序
要啟動新項目，請創建一個 Flutter 項目：
1、選擇 「New -> New Flutter project」。
Creating a new Flutter plugin
2、在窗口中，選擇所需的項目類型。在這種情況下，你需要選擇 「Flutter Application」。
3、命名你的項目為?。請注意，你應該使用合併的名稱，因此請使用下劃線而不是空格。你可能還需要指定 SDK 的路徑。
Naming a new Flutter plugin
4、輸入軟體包名稱。
你已經創建了一個項目！現在，你可以在設備上或使用模擬器啟動它。
Device options in Flutter
選擇你想要的設備，然後按 「Run」。稍後，你將看到結果。
Flutter demo on mobile device
現在你可以在一個中間項目上開始工作了。
嘗試 Flutter for web
在安裝 Flutter 的 Web 組件之前，你應該知道 Flutter 目前對 Web 應用程序的支持還很原始。因此，將其用於複雜的項目並不是一個好主意。
默認情況下，基本 SDK 中不啟用 「Flutter for web」。要打開它，請轉到 beta 通道。為此，請在終端中輸入以下命令：
flutter channel beta output
接下來，使用以下命令根據 beta 分支升級 Flutter：
flutter upgrade output
要使 「Flutter for web」 工作，請輸入：
重新啟動 IDE；這有助於 Android Studio 索引新的 IDE 並重新載入設備列表。你應該會看到幾個新設備：
Flutter for web device options
選擇 「Chrome」 會在瀏覽器中啟動一個應用程序， 「Web Server」 會提供指向你的 Web 應用程序的鏈接，你可以在任何瀏覽器中打開它。
不過，現在還不是急於開發的時候，因為你當前的項目不支持 Web。要改進它，請打開項目根目錄下的終端，然後輸入：
此命令重新創建項目，並添加 Web 支持。現有代碼不會被刪除。
請注意，目錄樹已更改，現在有了一個??目錄：
File tree with web directory
現在你可以開始工作了。選擇 「Chrome」，然後按 「Run」。稍後，你會看到帶有應用程序的瀏覽器窗口。
Flutter web app demo
恭喜你！你剛剛為瀏覽器啟動了一個項目，並且可以像其他任何網站一樣繼續使用它。
所有這些都來自同一代碼庫，因為 Flutter 使得幾乎無需更改就可以為移動平台和 Web 編寫代碼。
用 Flutter 做更多的事情
Flutter 是用於移動開發的強大工具，而且它也是邁向跨平台開發的重要一步。了解它，使用它，並將你的應用程序交付到所有平台！
via:https://opensource.com/article/20/9/mobile-app-flutter
作者：Vitaly Kuprenko選題：lujun9972譯者：gxlct008校對：wxy
本文由LCTT原創編譯，Linux中國榮譽推出
