做做Flutter-Day09：如何開始一個Flutter專案

會了語法之後還沒完，我們需要開始一個專案才正式入門Flutter

一個空的Flutter專案

前言

在上一篇文章中，我們提到一些基礎語法的概念，語法在各個語言中大同小異，但從語法開始講的理由，其實是為了掌握專案構建的運用，通常在深入一門領域的時候，我會先做的事情是知道「最基礎」的事情，最基礎的基本功如果練好，那麼接下來構建該領域的議題時，你會有事半功倍的效果。為什麼會這麼想呢？就有點像是你要寫一篇論文，要導用什麼研究理論來做這篇研究，知道理論基礎的來龍去脈，你會更能掌握整個從理論架構延伸出的議題應用。

那麼，接下來我們要談的議題是如何開始一個Flutter 專案，這篇文章會有幾個重點：

1. 如何初始化一個Flutter專案
2. 如何run一個Flutter專案
3. run專案的時候可能會遇到什麼問題
4. 遇到問題的時候可以怎麼排除

OK，那我們就開始吧！

正文

1. 如何初始化一個Flutter專案

大部分的人應該都知道要怎麼在電腦上打開終端機吧？

那麼就在你的終端機上輸入下面的指令，這個時候就會構建一個Flutter專案了：

flutter create my_flutter_project

這個時候你就會看到接下來的訊息：

創建一個flutter專案

上面會顯示你已經創建的專案名稱，還有相關的資訊。

如果對終端機輸入命令：ls（查看資料夾所有的內容）

就可以看到已經成功的創建了一個Flutter專案：sample_project

看一眼創建的專案

這個時候就可以用VScode或者是Android Studio來看這個專案的整個內容，不過這邊我會先用終端機來帶看一下：

一樣輸入cd sample_project後輸入 ls，就會看到flutter專案可能可以支援的平台有哪些，不過目前作為Mobile開發者，我們就會把注意力集中在iOS、Android上，那在這邊的專案結構裡，我們會看到有一個檔案叫做「lib」，不要懷疑，這個資料夾內部就是你建構Flutter程式碼的地方

整個flutter的結構

那我們接下來用VScode來進到專案內部瞧瞧：

lib

從lib可以看到專案內部有一個main.dart檔案，這個檔案就是所謂的App入口點：

void main() {
    runApp(const MyApp());
}

記得所有的起點都在這裡，這是Flutter開始一切程式碼的地方。

好，那接下來我們並不會開始介紹寫程式碼，而是會檢查一些基本的相關內容，比如像是Flutter的版本、Dart的版本，怎麼做呢？

輸入下面的程式碼：

flutter --version

flutter的各種資訊

這時候你會看到Flutter3.13.0、Dart3.1.0…etc

這是目前的SDK，在寫這篇文章的當下，其實Flutter已經出到3.16了，在開發的過程其實蠻常會遇到雙平台在版本與套件上相容的問題，所以記得你的SDK是很重要的一件事情，Flutter在開發的過程往往會容易遇到的是你的SDK與套件的衝突，這時候決定環境就變得異常重要。

2. 如何run一個flutter專案在手機上：

其實這件事情很簡單：

1. 先檢查你在原生端是使用iOS還是Android手機，然後確認手機是否接上限或是模擬器是否已經預設在原生端的開發環境，如果確認好了，比如像是VSCode會很貼心的在右下角註明你程式會run在什麼機器或模擬器下。

2. 所以確認完後就執行下面的命令：

flutter run

這樣就可以直接把Flutter專案build在手機上了。簡單對吧？

不過，有時候你也會遇到一種尷尬的情境，尤其是遇到iOS專案可能在執行flutter run的時候會發現整個專案可能卡在「Xcode build…」這個關節有點久的時候，應該怎麼辦？

3. run 專案的時候可能會遇到什麼問題

目前就經驗談來說，VScode 執行flutter專案，如果是使用Android手機或模擬器，相較之下問題會比較少一點，畢竟Android、Flutter很多的資源其實畢竟也還有同一個公司的影子，但flutter run在iOS的開發環境的時候，就會產生很多不一樣的地方：

首先我們得來看一下在Flutter專案底下的iOS檔案夾裡面含有什麼東西，以及跟原生的專案差在哪裡？

iOS專案在Flutter平台的目錄

其實對於flutter鑲嵌在iOS上這樣的做法，如果就以archive整包專案來說，看的會是Generated檔案：

而這一部分會跟pubspec.yaml檔的version相關聯，如果發生版號錯誤，可以往這個方向找，然後其實building版號還有一些小陷阱，往後會再分享相關資訊出來。

然後，有時候你可能會發現有一些Crash的造成會死在註冊套件，這邊主要會處理的是flutter層的相關資源鑲嵌在iOS上的對應：

generatedPlugin

上面這段plugin的資源是在AppDelegate下面調用，如果遇到iOS手機在執行APP的閃退或UI畫面凍結，極大可能是這個區塊出問題，畢竟這邊也是flutter程式的入口點：

就以單純的iOS專案跟flutter on iOS從Xcode上的差異，大致上就是flutter怎麼把程式碼build在iOS上的接口，了解這些接口主要的行為後，可以說就已經懂了flutter on iOS的運作了，但畢竟building的時候，還是要跟iOS打交道，所以Xcode的版本差異與資源support就變得非常重要。

不過在面對未知的問題時，通常做法都是如下：

// 先在終端機執行清除所有plugin的鑲嵌
flutter clean

// building
flutter run

先嘗試上面兩者，如果真的不行，那就接著往下看run flutter 程式碼在iOS上會導致失敗的幾個方向：

1. Xcode版本不支援iOS手機的版本，我想你可以看一下這個reference，裡面詳述了Xcode對iOS版本的支援度，如果遇到推出新的iOS版本的時候，就要注意一下Xcode有沒有對應的開發環境。
2. flutter SDK的要求，有可能SDK會在terminal表述資源應該要多少的Xcode或iOS版本，這個時候就應該注意一下flutter有沒有需要upgrade或downgrade的可能。
3. 但也要注意，當你遷移了上述兩點兩者的版本後，可能會有對應的flutter套件對接的podfile的套件發生SDK環境相容的問題，這個時候要審慎的面對到底應該SDK升版或者是降版。
4. 而當你處理玩這些升版、降版的問題後，你實際上還要run一遍程式碼在Android手機上，確認這些更正都不是問題。

所以，在iOS上的building失敗大致上會包含上述的四大方向的檢查，確定都沒問題之後，你才能確定失敗的原因可能是什麼，還有確保當前的程式碼是否是完全沒有問題的。

小結

以上這一連串的歸納與整理主要是我這一段時間入坑Flutter專案時的經驗談，其實大部分的問題通常都會是改iOS壞Android，改Android壞iOS，上述重複10遍，就像打地鼠一樣解bug解的沒完。
但flutter hot reload快速建構UI的好處還是讓現在我這個開發者過得還不錯，如果有機會的話，再分享一些架構的建立以及如果選擇要做flutter了，怎麼配置專案會比較好。

最後，review一下這一篇文章提到的一些重要的資訊：

1. 開發flutter 專案必須牢記的幾個指令

//run 專案
flutter run

//檢查sdk版本
flutter --version

//清除所有flutter building時的資源
flutter clean

// 可能還有診斷指令（雖然我很少用）
flutter doctor

2. 開發flutter專案的編譯sense

問題大多出在iOS：

a. Xcode版本是否支援iOS版本
b. flutter SDK是否兼容Xcode或iOS版本？
c. flutter 對接 iOS的套件是否發生衝突？
d. 回頭確認Android是不是在改變這些之後還可以順利呈現相關功能？

3. 問題不在flutter程式碼的時候應該怎麼辦？

如果是iOS的話就回頭看看AppDelegate的registry有沒有什麼問題，或者Generated檔案有沒有合理地變更版號，有時候上TestFlight的版號遷移可能就會因為版號沒有重新building而需要flutter clean再flutter run。

Android的話可能就要看看APP檔或外層的Android檔的設定是否有相關的script出問題。

以上分享包含一些flutter開發日常遇到的瑣碎事，如果剛好有幫助到你的話就給我個掌聲吧！接下來還會Share一些flutter相關的開發議題！