從前端Web開發(fā)轉(zhuǎn)型Flutter開發(fā)？本文將分享我的經(jīng)驗，幫助你輕鬆過渡。我會指出兩者共通的概念，以及Flutter中需要學習的新概念，讓你不再糾結(jié)於選擇哪個生態(tài)系統(tǒng)。

共通的概念

這部分列舉了前端Web開發(fā)和Flutter的相似之處，以及你已掌握的技能如何幫助你更快上手Flutter。

1. 用戶界面(UI) 實現(xiàn)

在前端Web開發(fā)中，你使用HTML元素構(gòu)建UI，並用CSS進行樣式設(shè)置。在Flutter中，你使用Widgets構(gòu)建UI，並用屬性設(shè)置樣式。

Dart中的Color類與CSS一樣，支持“rgba”和“hex”顏色值。 Flutter也與CSS一樣，使用像素作為空間和尺寸單位。

Flutter幾乎為所有CSS屬性及其值提供了對應(yīng)的Dart類和枚舉，例如：

• BorderRadius
• BoxShadow
• FontWeight
• Opacity
• Padding
• …

Flutter的Column和Row widget相當於CSS中的display: flex 。 MainAxisAlignment和CrossAxisAlignment屬性對應(yīng)justify-content和align-items樣式。要調(diào)整flex-grow樣式，可以使用Expanded或Flexible包裹相應(yīng)的子widget。

對於復(fù)雜的UI，F(xiàn)lutter提供CustomPaint類，它相當於Web開發(fā)中的Canvas API。 CustomPaint允許你自定義繪製任何UI。通常在需要實現(xiàn)非常複雜的UI或widget組合無法實現(xiàn)的效果時使用CustomPaint 。

2. 多屏幕分辨率適配

網(wǎng)站運行在瀏覽器上，移動應(yīng)用運行在設(shè)備上。開發(fā)過程中，都需要考慮平臺差異。每個平臺都以不同的方式實現(xiàn)相同的特性（攝像頭、定位、通知等）。

作為Web開發(fā)者，你熟悉網(wǎng)站響應(yīng)式設(shè)計，使用媒體查詢處理不同屏幕尺寸下的網(wǎng)站顯示效果。

在Flutter中， MediaQuery類提供了類似的功能。它可以獲取設(shè)備方向（橫向或縱向）、視口大小、 devicePixelRatio等設(shè)備信息，幫助你根據(jù)不同屏幕尺寸調(diào)整應(yīng)用的UI。

3. 調(diào)試工具、編輯器和命令行工具

桌面瀏覽器擁有開發(fā)者工具，包括檢查器、控制臺、網(wǎng)絡(luò)監(jiān)控等，提高了Web開發(fā)效率。 Flutter也有自己的DevTools，包含widget檢查器、調(diào)試器、網(wǎng)絡(luò)監(jiān)控等功能。

IDE支持也相似。 Visual Studio Code是流行的Web開發(fā)IDE，擁有許多Web相關(guān)的擴展。 Flutter也支持VS Code，以及Android Studio。兩者都支持Flutter DevTools，使Flutter的工具鏈非常完善。

大多數(shù)前端JavaScript框架都帶有命令行界面(CLI)，例如：Angular CLI、Create React App、Vue CLI等。 Flutter也擁有專屬的CLI，用於構(gòu)建、創(chuàng)建和開發(fā)Flutter項目，以及執(zhí)行代碼分析和測試。

新的概念

這部分介紹Flutter特有的概念，這些概念在Web開發(fā)中要么不存在，要么實現(xiàn)方式不同。

1. 滾動處理

在Web開發(fā)中，默認的滾動行為由瀏覽器處理，你可以使用CSS（例如overflow屬性）自定義滾動。

但在Flutter中，Widget組默認不滾動。如果Widget組可能溢出，你需要主動配置滾動。

Flutter使用特殊的widget來配置滾動，例如： ListView 、 SingleChildScrollView 、 CustomScrollView等。這些可滾動widget提供了對滾動行為的精細控制。 CustomScrollView允許你配置複雜和專業(yè)的滾動機制。

在Flutter中，使用ScrollView是不可避免的。 Android和iOS分別有ScrollView和UIScrollView來處理滾動。 Flutter需要一種方式來統(tǒng)一渲染和開發(fā)者體驗，因此也使用了ScrollView 。

嘗試改變思維方式，不要再考慮文檔結(jié)構(gòu)的流程，而是將應(yīng)用程序視為設(shè)備原生繪圖機制的開放畫布。

2. 開發(fā)環(huán)境搭建

創(chuàng)建一個簡單的網(wǎng)站，只需要創(chuàng)建一個.html文件並在瀏覽器中打開即可。 Flutter則復(fù)雜得多。你需要安裝Flutter SDK，並為測試設(shè)備配置Flutter。如果你想為Android開發(fā)Flutter應(yīng)用，你需要設(shè)置Android SDK，並配置至少一個Android設(shè)備（模擬器或物理設(shè)備）。

iOS設(shè)備（iOS和macOS）也是如此。在Mac上安裝Flutter後，你還需要設(shè)置Xcode。同樣需要至少一個iOS模擬器或iPhone來測試Flutter應(yīng)用。桌面Flutter的設(shè)置也比較複雜。在Windows上，你需要使用Visual Studio（不是VS Code）設(shè)置Windows開發(fā)SDK。在Linux上，你需要安裝更多軟件包。

Flutter不依賴額外的設(shè)置即可在瀏覽器中運行。因此，你可能會忽略目標設(shè)備的額外設(shè)置。但在大多數(shù)情況下，你使用Flutter進行移動應(yīng)用開發(fā)，因此需要設(shè)置Android或iOS環(huán)境。 Flutter提供了flutter doctor命令，用於報告開發(fā)環(huán)境的設(shè)置狀態(tài)，幫助你了解需要進行哪些設(shè)置。

但這並不意味著Flutter開發(fā)速度慢。 Flutter擁有強大的引擎， flutter run命令允許在編碼過程中熱重載到測試設(shè)備。不過，你需要按R鍵才能進行熱重載。 Flutter的VS Code擴展允許在文件更改時自動熱重載。

3. 打包和部署

與部署移動應(yīng)用相比，部署網(wǎng)站更便宜、更容易。部署網(wǎng)站時，你通過域名訪問它們，域名通常需要每年續(xù)費，但並非必須。

許多平臺提供免費的託管服務(wù)，例如DigitalOcean提供免費的.ondigitalocean.com子域名。你可以將這些域名用於構(gòu)建文檔網(wǎng)站或不注重品牌宣傳的網(wǎng)站。

在Flutter的移動應(yīng)用開發(fā)中，你通常需要將應(yīng)用部署到兩個平臺：

• App Store（iOS設(shè)備）
• Google Play（Android設(shè)備）

你需要在每個平臺上註冊開發(fā)者賬號，這通常需要付費或訂閱，並進行身份驗證。

App Store需要註冊Apple Developer Program，需要支付每年99美元的訂閱費用。 Google Play需要支付一次性25美元的註冊費用。

這些應(yīng)用商店會在應(yīng)用上線前進行審核。

此外，用戶不會自動獲取應(yīng)用更新，他們必須手動更新已安裝的應(yīng)用程序。這與Web不同，Web上的用戶可以自動看到最新版本的網(wǎng)站。

管理已部署的應(yīng)用程序比管理已部署的網(wǎng)站相對更費力。但是，這並不應(yīng)該嚇倒你，畢竟已經(jīng)有數(shù)百萬個應(yīng)用部署在這些商店中。

關(guān)於Flutter的額外思考

Flutter是一個跨平臺工具，用於構(gòu)建桌面、移動或Web應(yīng)用程序。 Flutter應(yīng)用具有像素級精度，在每個平臺上渲染相同的UI，這是因為每個Flutter應(yīng)用都包含F(xiàn)lutter引擎，該引擎渲染Flutter UI代碼，並與目標平臺通信以處理事件和交互。

Flutter效率高，性能好，因為它使用Dart構(gòu)建並利用了Dart的特性。

憑藉諸多優(yōu)勢，F(xiàn)lutter是許多應(yīng)用的理想選擇。跨平臺應(yīng)用節(jié)省了生產(chǎn)和維護期間的資金和時間。但是，F(xiàn)lutter（以及跨平臺解決方案）在某些情況下可能不是最佳選擇。

如果你希望用戶使用平臺開發(fā)者工具與你的應(yīng)用程序交互，則不應(yīng)使用Flutter。這裡的平臺開發(fā)者工具是指特定於設(shè)備的工具，例如Android開發(fā)者選項，以及瀏覽器開發(fā)者工具。

如果你期望瀏覽器擴展與網(wǎng)站交互，則不應(yīng)將Flutter用於Web開發(fā)。

此外，不應(yīng)將Flutter用於內(nèi)容豐富的網(wǎng)站。

結(jié)論

本文回顧了從前端Web開發(fā)到Flutter開發(fā)的技能遷移，以及你需要學習的新的應(yīng)用開發(fā)概念。

Flutter對Web開發(fā)者來說相對容易上手，因為兩者都涉及UI實現(xiàn)。嘗試Flutter，你會發(fā)現(xiàn)它提供了良好的開發(fā)者體驗。嘗試使用Flutter構(gòu)建移動應(yīng)用，並展示你的成果！

以上是前端Web開發(fā)人員的顫動的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！