Flutter 2020:跨平臺狀態

已兌現承諾

Flutter 2020:跨平臺狀態

Flutter cross-platform promises: mobile, web, and desktop


Flutter是Google支持的跨平臺框架,可實現跨平臺軟件開發。

這意味著Flutter應用程序可以從一個代碼庫開發,構建並部署在多個平臺上。

承諾

單一的代碼庫承諾非常誘人。 您可以用更少的資源,更少的時間,有時甚至是更少的技能(而不是更少的技能)來始終如一地"完成所有工作",這一事實是不容忽視的。

製作一個在所有設備(同一平臺)上保持相同外觀的應用程序本身就是一個挑戰。 跨平臺實現此目標,同時保持每個平臺特有的微妙UI / UX機制,當您為每個目標平臺使用不同的技術和方法時,可能很快變成一場噩夢。

沒有人願意花更多的錢,如果他們可以花更少的錢。 大多數客戶希望他們的想法儘快準確地轉化為產品,因此在花時間方面也是如此。

考慮到您需要在多個平臺上使用您的應用程序,並且您選擇的跨平臺技術為您的功能提供了正確的支持,隨著時間的推移,金錢變成了簡單的數學運算,它證明了跨平臺開發的時間和成本效益更高。 需要您的應用程序提供。

如果僅針對一個平臺和/或您的應用程序中有一些核心功能很難/幾乎無法使用X跨平臺技術,那麼跨平臺可能不是您的正確選擇。

有時,使用跨平臺技術在單個平臺上實現正確處理可能比使用本機開發進行正確處理要昂貴得多。

許多客戶認為他們的軟件需要事先考慮成本和技能,這是很容易的:更新的成本/難度如何?

假設您預算巨大,一切順利,並且您的應用是本地構建的,並已部署在所有平臺上:移動,網絡和桌面。 他們按照預期的方式工作,每個人都很高興。

一段時間(2-3年)後,您想更新這些應用程序,並且原始開發人員不可用,或者他們對這些技術的支持終止。 現在該尋找具有適當技能的人員來更新您的Android(Java),iOS(Objective-C / Swift),網絡(HTML / CSS / JS +當時流行的前端框架), Windows(C ++ / C#)和macOS(Objective-C / Swift)應用程序(考慮到後端API也不需要更新)。 僅找到具有適當技能的適當人員,在正確的頁面上放置他們,並獲取要包含的更新並在所有平臺上一致地部署,這可能是一個巨大的挑戰。

樂觀地說,那些開發人員還在身邊,他們可以提供支持。 溝通需求,更新所有應用程序並在所有平臺上部署將花費多少時間?

現在,假設所有這些應用程序都來自Dart / Flutter中的單個代碼庫,而您只需要一支能夠與Flutter合作的團隊(可能只有一個人)就能更新所有應用程序。

Flutter努力兌現這一承諾。

在這一階段,Flutter非常有能力,有望成為跨平臺軟件開發的首選解決方案。

已交付

首先,您需要一個編輯器來編寫您的應用程序代碼。您可以使用任何文本編輯器和命令行工具來編譯您的應用程序,儘管這會有些乏味並且浪費您的時間。 編輯器有一些選項:Visual Studio代碼(VS Code),Android Studio,IntelliJ等。 我使用VS Code(免費),有時使用IntelliJ(付費)。 IntelliJ提供了許多不錯的功能,例如自動保存,是我使用過的最好的IDE,儘管目前我不將其用於Flutter項目。 我選擇的Flutter編輯器是VS Code。

第二,您將需要安裝Flutter。 您可以在macOS,Windows,Linux和Chrome操作系統上執行此操作。

Flutter有4個主要渠道(分支):穩定版,測試版,開發者和母版。 從左到右,新功能的增加,支持水平和整體穩定性下降。 我們將使用Flutter的最新(並非總是)最出色的主頻道。

要查看您在哪個通道上,可以在TERMINAL選項卡中使用命令顫動通道。 輸出將是:

Flutter channels: master dev beta* stable


要將通道切換為主通道,應使用抖動通道主通道,然後在" TERMINAL"選項卡中使用抖動升級。 將會有簡短的下載和帶有狀態的摘要輸出。

第三步(也是最後一步)是測試您可以創建一個包含所有內容的項目。 使用"視圖—命令面板"…,然後鍵入Flutter,您可以選擇Flutter:New Project。 如果在"輸出"選項卡中沒有錯誤彈出窗口,那您就好了。

Flutter 2020:跨平臺狀態

The OUTPUT tab after successfully creating a Flutter project


因此,讓我們深入瞭解Flutter在2020年可以做什麼:

移動端

Flutter可以使用單個代碼庫為iOS和Android編譯您的應用。

默認情況下,當我們從Flutter的任何渠道創建項目時,我們都可以為移動(電話/平板電腦)iOS / Android編譯該項目。

flutter devices命令將顯示可用設備(已連接到開發計算機)。 例如,在我的機器上,它輸出:

4 connected devices:AndroidDevice

• 94dcba0c

• android-arm64

• Android 10 (API 29)iOSDevice

• 000507e0a52252f43eaa151dcbc4ebfa52bd92f0

• ios

• iOS 13.3.1Chrome

• chrome

• web-javascript

• Google Chrome 80.0.3987.149Web Server

• web-server

• web-javascript

• Flutter Tools


如果我們運行flutter run命令,則該項目將在上面列表中的第一個設備上編譯並以調試模式(默認模式)運行。 就我而言,該設備是Android設備。

Flutter 2020:跨平臺狀態

Flutter sample app running on an Android device


要在特定設備上運行,您可以使用設備ID(每個子列表中的第一個)。 例如,要在我的iOS設備上運行,我將使用flutter run -d 000507e0a52252f43eaa151dcbc4ebfa52bd92f0命令。

Flutter 2020:跨平臺狀態

Flutter sample app running on an iOS device


要在iOS上運行,您需要一臺運行macOS的計算機。 無需實際的iOS設備。 模擬器將完成這項工作。 Android也是如此。

網頁

使用Flutter的所有渠道(穩定版除外),您還可以選擇運行和構建Web平臺。

要在網絡JavaScript平臺上運行,我們可以使用flutter run -d chrome或flutter run -d web-server。

第一個選項可在Chrome瀏覽器中運行該應用。 顧名思義,第二個在Web服務器中運行該應用程序。

選項之間的區別在於,第一個選項可在Chrome中啟動應用程序,而另一個選項僅提供您可以使用首選瀏覽器導航到的地址。 此外,Chrome選項允許進行高級調試和配置。

Flutter 2020:跨平臺狀態

The sample app running in Microsoft Edge & Internet Explorer 11, Opera, Chrome, Firefox, and Safari


警告:Flutter對Web開發的支持還不穩定,並且尚未在生產環境中進行全面測試。

桌面

與處於測試階段的Web平臺不同,在開發/功能/支持方面,桌面平臺至多處於早期alpha狀態。

我們將介紹從最先進到最少的受支持的操作系統:

· 蘋果系統

在我們剛剛使用主通道創建的項目中,flutter config --enable-macos-desktop命令將支持在macOS上進行桌面應用程序開發(請注意,只有在運行macOS的計算機上才能運行和構建此類應用程序)。

如果運行未連接物理設備的抖動設備,則會得到:

3 connected devices:macOS

• macOS

• darwin-x64

• Mac OS X 10.15.3 19D76Chrome

• chrome • web-javascript

• Google Chrome 80.0.3987.149Web Server

• web-server

• web-javascript

• Flutter Tools


要將特定於構建的文件夾添加到我們的項目中,我們必須運行flutter create ..

最後,要在macOS上運行我們的桌面應用程序,我們使用flutter run -d macOS命令。

Flutter 2020:跨平臺狀態

Flutter sample app running on macOS


警告:儘管macOS是最先進的桌面平臺,但仍處於測試階段。

· Windows

在我們剛剛使用主通道創建的項目中,flutter config --enable-windows-desktop命令將啟用對Windows上桌面應用程序開發的支持(請注意,只有在運行Windows的計算機上才能運行和構建此類應用程序)。

如果運行未連接物理設備的抖動設備,則會得到:

3 connected devices:Windows

• Windows

• windows-x64

• Microsoft Windows [Version 10.0.18362.720]Chrome

• chrome • web-javascript

• Google Chrome 80.0.3987.149Web Server

• web-server

• web-javascript

• Flutter Tools


要將特定於構建的文件夾添加到我們的項目中,我們必須運行flutter create ..

最後,要在Windows上運行我們的桌面應用程序,我們使用flutter run -d Windows命令。

Flutter 2020:跨平臺狀態

Flutter sample app running on Windows


警告:當前的Windows Shell是早期的技術預覽。 最終嵌入的API可能與當前的API表面明顯不同。

· Linux

在我們剛剛使用master通道創建的項目中,flutter config --enable-linux-desktop命令將啟用對Linux上桌面應用程序開發的支持(請注意,只有在運行Linux的計算機上才能運行和構建此類應用程序)。

如果運行未連接物理設備的抖動設備,則會得到:

1 connected device:Linux

• Linux

• linux-x64

• Linux


要將特定於構建的文件夾添加到我們的項目中,我們必須運行flutter create ..

最後,要在Linux上運行桌面應用程序,我們使用flutter run -d Linux命令。

我在Windows 10計算機上將Ubuntu 18.04 LTS設置為WSL(Linux的Windows子系統)。 在一段時間內,可以在Windows內運行Linux。 不幸的是,我無法成功讓Xming UI運行示例應用程序。

然後打開以在Windows上使用VirtualBox,由於某種原因,VirtualBox無法安裝Ubuntu。

最終,我設法使VirtualBox在macOS上運行Ubuntu文件。

Flutter 2020:跨平臺狀態

Flutter sample app running on Linux (Ubuntu)


警告:當前的Linux shell是GLFW佔位符,以允許早期試驗。 最終外殼的API與當前實現會有根本的不同。

總結

我們設法使示例應用程序在移動設備(iOS和Android),Web(在Microsoft Edge和Internet Explorer 11中,Opera,Chrome,Firefox和Safari瀏覽器中)和臺式機(macOS,Windows和Linux系統)上運行。

儘管沒有正式的支持,但有了一些黑客手段,我們甚至可以使示例應用程序在Raspberry Pi(IoT上下文)上運行。

您可能已經注意到,我僅將應用程序的默認標題修改為Fluttering UP! (在不久的將來對此有更多的瞭解),並通過使用debugShowCheckedModeBanner刪除了調試橫幅:MaterialApp為false。

此外,還要注意的另一點是,在Flutter附帶的示例應用程序的呈現上存在細微差異(不同平臺之間呈現的顏色,字體,陰影,大小有所不同,在Web平臺/瀏覽器的情況下, 瀏覽器到瀏覽器)。

桌面平臺還沒有關於穩定性和可用性的信息,但是正處於正確的軌道。

如果要開始使用Flutter,可以直接進入默認的示例應用程序並從那裡開始。 有很多資源可供發現和用於構建您的應用程序。 您還可以從Dart的一些基礎知識開始,Dart是使這一切成為可能的秘密武器(編程語言)。

在這一階段,Flutter非常有能力,有望成為跨平臺軟件開發的首選解決方案。

Tha(nk | t's)全部!

(本文翻譯自Constantin Stan的文章《Flutter 2020: The State of Cross-Platform》,參考:https://medium.com/@constanting/flutter-2020-state-of-cross-platform-814f1d8ff16)


分享到:


相關文章: