在 Mac 上準備 Flutter App 的開發環境

透過 Google 推出的 Flutter framework 我們可以更方便地開發跨平台 App，開發出在 iOS、Android、Web、macOS、Windows 和 Linus 上都能執行的 App。

使用 VS Code 開發 Flutter App — 建立專案，打開專案和啟動模擬器執行 App

開發 Flutter App 時，我們有許多 IDE 可選擇，其中 VS Code 是滿多人偏愛的 IDE，以下彼得潘將示範使用 VS Code 開發 Flutter App 的相關操作。

• 建立 Flutter 專案。
• 從 VS Code 打開專案。
• 啟動模擬器

使用線上 IDE Project IDX 開發 Flutter App

Google 推出了令人期待的線上 IDE Project IDX，以後只要在有網路的地方，我們可以用任何電腦打開瀏覽器寫程式，不用再花時間裝軟體準備開發環境了。

從 Android Studio 建立 Flutter 專案和啟動模擬器執行 App

• 從 Android Studio 建立 Flutter 專案。
• 啟動 iOS 模擬器執行 App。
• 啟動 Android 模擬器執行 App。

建立 Flutter 專案

• 打開 Android Studio，在 Projects 分頁點選 New Flutter Project。

透過 Flutter Inspector 檢視 App 畫面的 widget 元件

開發 Flutter App 時，我們可以透過 Flutter Inspector 檢視 App 畫面的 widget 元件，它將幫助我們方便地查看 UI 相關的細節和問題。

在 Windows 上準備 Flutter App 的開發環境

透過 Google 推出的 Flutter framework 我們可以更方便地開發跨平台 App，開發出在 iOS、Android、Web、macOS、Windows 和 Linus 上都能執行的 App。

開發 Flutter App 前，我們必須先準備好開發環境。之前彼得潘介紹過如何在 Mac 準備 Flutter App 的開發環境。

在 Flutter App 顯示專案裡的圖片

利用 Flutter 的 Image widget 我們可以方便地顯示專案裡的圖片。以下我們一步步示範如何在 VS Code 將圖片加入 Flutter 專案，然後利用 Image widget 顯示圖片。

認識 Dart function 的參數: positional parameters、optional positional parameters、named parameters、required named parameters

Flutter App 學習資源和課程整理

Flutter 官方網站

控制 Flutter 圖片的大小和縮放

最近彼得潘剛買新的 M3 MAX MacBook Pro，覺得十分地開心，因此以下我們就以 Apple 強大的 m3 Max 圖片為例，示範如何在 Flutter 控制圖片的大小和縮放。