在開發 Flutter 過程中，總是會需要使用到各種不同的 Widget 或 API，名稱與使用方式也十分易懂。但是總在開發的過程中，才發現有許多時候，Widget 的運作行為與我們想像的不太一樣。直到我們去看了原始碼或者文件，才發現是自己腦補了他的運作原理。今天就來聊聊幾個 Flutter 可能與你想的不太一樣的地方。

Sort 方法是否 stable ?

我們常常為了畫面顯示，而排序各種資料，為了完成功能，我們可能先看看 list 或從 stackoverflow 找尋如何排序陣列，也如期地找到 List 身上有個 sort 方法可排序。

https://dartpad.dev/?id=985f6b2339e5e81ecf32986e18f626e6

但有些時候，我們設定排序的條件時，會想讓資料先以條件 A 排序，接著再以條件 B 排序，此時我們會連續呼叫兩個 sort 方法，來得到我們想要的結果。

https://dartpad.dev/?id=b21a85b82cd0e2d02b951411f0151efd

當我們完成需求中，也進行了單元測試，自然覺得一切都沒問題。可是呢，忽然有一天使用者回報了一個問題，說畫面排序不太對，我們回頭看程式碼，卻也無法發現問題所在。明明單元測試也通過了，測試環境也通過了，但正式環境卻還是出了問題。

https://dartpad.dev/?id=1808a94cf31bc1c96a437c66466966c0

原來在官方文件有提到 List 的 sort 並不是 stable 的排序方法，導致使得我們第二個 sort 有可能打亂第一個 sort 的結果，使得排序結果不如預期。而如果我們進一步去看原始碼的話，就會發現原來只有在陣列長度超過一定長度時，sort 方法才會使用 unstable 的 Quick Sort，這也是為什麼我們的單元測試會失效。

Container 忽大忽小

Container 是我們開發 Flutter 中最常使用到的 Widget 之一，我們常常使用它來設定背景顏色，設定 Padding 或 Margin。雖然 Container 非常容易使用，但是好用的背後，卻也隱藏了許多行為。如果開發者沒有仔細閱讀文件的話，可能有時候會對於 Container 的大小有點疑惑，讓我們來看看一個例子。

https://dartpad.dev/?id=4b422ab818d97c6a3de68c8347ed0c72

在上面的例子中，我們給了 Container 綠色背景與 Padding，並把一個 Button 放在裡頭，Container 的大小我們也能從畫面上看到，就只比 Button 大一些。讓我們再來看看另外一個例子。

https://dartpad.dev/?id=296be610230a63ea3e5fdcd9391f93da

在上面這個例子中，我們加了一個 Alignment 之後，Container 的大小竟然擴大到整個螢幕，此時如果對 Container 的行為不熟悉的開發者，可能會有點摸不著腦袋，不知道為什麼會變成這樣。其實在 Container 的文件中就有提到

If the widget has an alignment, and the parent provides unbounded constraints, then the Container tries to size itself around the child.

閱讀文件

Flutter 是一個 UI 框架，大多時候我們會與 Widget 互動，除了 Container 之外，許多 Layout 型的 Widget，例如 Stack、Scaffold、ListView …等等，都有許多可能大家比較少注意到的行為。如果我們沒有仔細閱讀文件，就開始寫程式，就會很難從使用過程中了解其行為。很多時候，身為一個工程師，我們喜歡動手試試而不是看文件，卻也常常忽略一些問題，或不自覺地以過往經驗腦補了外部 API 的行為。只有當線上 Bug 發生時，才回頭看原始碼或者文件，然後才恍然大悟。

結論

我們在開發程式時，許多時候都會用到各式各樣的外部 API，只有正確了解外部 API 如何運作，有什麼細節，我們才能讓我們更了解我的程式。當發生問題時，才不會手忙腳亂，或者是使用錯誤的方法來解決問題，從而隱藏真正的問題。