如何使用Flutter+Dart開發一個Android APP

做事情的幻想家發表於2020-03-07

寫在文章開頭的話

作為一名程式設計師,要時刻關注行業的新技術,一段時間不學習就會落伍。技術的更新速度很快,要時刻關注技術趨勢,並不斷學習,才能跟上時代的發展。這也直接間接的導致程式設計師早早脫髮。

移動端有iOS、Android、WP等,桌面端有Windows、Linux、MacOS等,還有Web端,移動端、桌面端、Web端統稱為大前端。大前端中的每一個細分領域用到的語言、框架和技術都不一樣,在這些領域之間跳動就要學習一大堆的新技術,直接導致了就業面的變窄,而且每一個細分領域的技術也在不斷的更新。千言萬語匯成一句話,程式設計師要想活下去就要不斷學習。

一個理想的狀態就是,用一種語言和技術就可以進行大前端所有領域的開發工作,這是公司和員工共同的願望。所以大前端的跨平臺開發技術必然是一個大趨勢,一套程式碼,多端執行。

Flutter是Google公司開發的一套跨平臺技術,用於大前端程式開發。Flutter使用的開發語言是Dart。Kotlin是Android平臺應用程式開發的官方語言,此外也可以使用Java和C/C++進行開發。今天,我們看看如何使用Flutter+Dart開發一個Android應用程式。

Flutter開發環境搭建

訪問Flutter官網,下載SDK安裝包,配置環境變數。好多技術一般都是著幾步,下面一步一步來。SDK官方下載地址

Flutter官網安裝頁面:

如何使用Flutter+Dart開發一個Android APP

下面以linux(Ubuntu)平臺為例子:

  1. 下載SDK storage.googleapis.com/flutter_inf…
  2. 解壓到特定目錄
$ tar xf flutter_linux_v1.12.13+hotfix.8-stable.tar.xz
複製程式碼
  1. 新增環境變數PATH
# flutter
export PATH=$PATH:${HOME}/workspace/flutter/flutter/bin
複製程式碼
  1. (提前)下載開發需要的二進位制檔案
$ flutter precache
複製程式碼

如何使用Flutter+Dart開發一個Android APP
5. 檢查flutter開發環境是否安裝完成

$ flutter doctor
複製程式碼

如何使用Flutter+Dart開發一個Android APP
flutter doctor命令會檢查開發需要的依賴,並給出提示。當出現問題的時候,可以根據提示去修復。

Dart SDK安裝

Dart SDK的安裝也是三步:官網下載SDK包,解壓到指定目錄,新增環境變數。Dart官網地址

整合開發工具安裝

Flutter支援的整合開發環境有Android Studio、IntelliJ、Visual Studio Code。其中官方開發環境是Android Studio。Visual Studio Code是一款輕量級的IDE,本文將採用VS Code進行演示。

首先去微軟官方網站下載:code.visualstudio.com/docs/?dv=wi…

如何使用Flutter+Dart開發一個Android APP
進行Fluter開發,需要安裝幾個外掛:Flutter、Dart、Code Runner。至此,準備工作就做完,下面就可以進行Android應用程式開發了。

總結一下:安裝Flutter SDK、安裝Dart SDK、安裝VS Code、安裝Android SDK。

Android應用程式建立

建立應用程式(VS Code)

  1. 選擇 View -> Command Palette
  2. 輸入flutter,選擇Flutter: New Project
  3. 輸入工程名字
  4. 為新工程建立或選擇一個parent dir
  5. 等待工程建立完成。

建立完成後,工程列表如下。除了Android外,也有iOS的移動端程式。程式位於lib/main.dart檔案。可以嘗試修改一些字串,看執行效果。

如何使用Flutter+Dart開發一個Android APP

執行應用程式

按F5執行應用程式。我使用的是一個Android TV的模擬器,寫過如下:

如何使用Flutter+Dart開發一個Android APP

下面是終端的列印資訊:

如何使用Flutter+Dart開發一個Android APP

後續學習

flutter.dev/docs/get-st…

相關文章