Flutter 每週尤物－第六週：FutureBuilder

當要計設的畫面與非同步方法掛勾時，就需要有個方法進行同步。

最常見的例子就是：把從伺服器下載來的資料，顯示在畫面上。

通常可以先建立一個空的資料物件（例如 List），事先把這個物件塞進元件裡；等到非同步處理完成後，再把資料寫入剛建好的資料物件，利用 setStatus() 重新渲染畫面，讓資料顯示在畫面上。

但這樣的方式，容易讓元件接到 null 值，使程式發生錯誤，賞用戶一個「紅屏」。

FutureBuilder 可以在進行非同步任務時，先在畫面上安排讀取（之類的）畫面提示用戶，等到資料下載好後，再更新畫面讓用戶看到真正的內容；就算是下載任務失敗，也可以安排提示錯誤訊息的畫面告知用戶。

FutureBuilder 在處理非同步載入，比更新物件後 setStatus() 更方便，且更有彈性。 

首先建立一個非同步任務。

本案是為了示範 FutureBuilder 的用法，用 Future.delayed() 刻意放慢回應速度。

接著建立一個 FutureBuilder 並在 future 參數中，代入剛剛建立的非同步任務。

最後在 builder 參數中，決定程式各階段要顯示什麼樣的畫面。

Builder 內會用 ConnectionState 判斷非同步任務的每個階段，在各階段會展示各自的畫面。 

  讀取完畢

讀取時發生錯誤