前端Web開發人員的顫動

從前端Web開發轉型Flutter開發？本文將分享我的經驗，幫助你輕鬆過渡。我會指出兩者共通的概念，以及Flutter中需要學習的新概念，讓你不再糾結於選擇哪個生態系統。

共通的概念

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

1. 用戶界面(UI) 實現

在前端Web開發中，你使用HTML元素構建UI，並用CSS進行樣式設置。在Flutter中，你使用Widgets構建UI，並用屬性設置樣式。

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

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

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

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

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

2. 多屏幕分辨率適配

網站運行在瀏覽器上，移動應用運行在設備上。開發過程中，都需要考慮平台差異。每個平台都以不同的方式實現相同的特性（攝像頭、定位、通知等）。

作為Web開發者，你熟悉網站響應式設計，使用媒體查詢處理不同屏幕尺寸下的網站顯示效果。

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

3. 調試工具、編輯器和命令行工具

桌面瀏覽器擁有開發者工具，包括檢查器、控制台、網絡監控等，提高了Web開發效率。 Flutter也有自己的DevTools，包含widget檢查器、調試器、網絡監控等功能。

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

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

新的概念

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

1. 滾動處理

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

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

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

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

嘗試改變思維方式，不要再考慮文檔結構的流程，而是將應用程序視為設備原生繪圖機制的開放畫布。

2. 開發環境搭建

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

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

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

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

3. 打包和部署

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

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

在Flutter的移動應用開發中，你通常需要將應用部署到兩個平台：

• App Store（iOS設備）
• Google Play（Android設備）

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

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

這些應用商店會在應用上線前進行審核。

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

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

關於Flutter的額外思考

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

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

憑藉諸多優勢，Flutter是許多應用的理想選擇。跨平台應用節省了生產和維護期間的資金和時間。但是，Flutter（以及跨平台解決方案）在某些情況下可能不是最佳選擇。

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

如果你期望瀏覽器擴展與網站交互，則不應將Flutter用於Web開發。

此外，不應將Flutter用於內容豐富的網站。

結論

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

Flutter對Web開發者來說相對容易上手，因為兩者都涉及UI實現。嘗試Flutter，你會發現它提供了良好的開發者體驗。嘗試使用Flutter構建移動應用，並展示你的成果！

以上是前端Web開發人員的顫動的詳細內容。更多資訊請關注PHP中文網其他相關文章！