迪西的程式光廊

PageView 可以做出滑動翻頁的動畫。   只要在 PageView 的 children 加入要當作分頁的每個 Widget 即可。 建議將每個作為分頁的 Widget 獨立成一個方法（例如上面的範例），避免程式碼巢狀過深。  橫向翻頁 亦可建立控制器，事先決定一開始要顯示哪一頁。 也可以決定滑動的方向。 縱向翻頁

FloatingActionButton 是一個（通常會）顯示在畫面右下角的圓形按鈕，讓用戶便於進行常用操作，例如：寫新文章、撥打電話⋯⋯等。 就像字面上的意思，它使終會飄浮在一個頁面的角落，不占用原本畫面的板面；預設使用 Material 設計語言，美觀、不跑版。 設置在正下方的 Floating Action Button    在 Flutter 中的 Scaffold，就有一個參數「floatingActionButton」可以用來建立按鈕。   也可以再建立底部導覽列，搭配 FloatingActionButton 使用，它會貼合導覽列。 而 floatingActionButtonLocation 參數，可以決定按鈕的位置與如何和導覽列（Bottom Navigation Bar）的配合。本例中的「FloatingActionButtonLocation.endDocked」即是「在右下角，並與導覽列貼合」。  執行結果

FadeTransition 便於製作元件的淡入與淡出動畫。 先建立動畫本身與動畫控制器。  AnimationController 是控制動畫的持續時間，可用 duration 參數控制持續時間。 接著用 Tween 設定數值的變化，本案是示範逐漸顯示的效果，所以分別設定 0 和 1。 Animation 整合動畫功能。如上圖整合 Tween 和 AnimationController 後，也能依需求新增偵聽器（Listener）。   用 FadeTransition 這個 Widget 包裝要實作淡入動畫的 Widget。      最後在 dispose() 方法中，釋放資源。   本例是一個包含 FlutterLogo 和一行文字的畫面，並新增一個浮動按鈕測試動畫。 最後記得呼叫 AnimationController . forward() 啟動動畫。  執行結果如上。 版本資訊： Flutter 2.9.0-1.0.pre.144 • channel master • https://github.com/flutter/flutter.git Framework • revision 07a36f07e3 (3 months ago) • 2021-12-21 01:09:07 -0500 Engine • revision d3075cd085 Tools • Dart 2.16.0 (build 2.16.0-123.0.dev) • DevTools 2.9.1 文章更新資訊： 2022/03/08 - 更新 Flutter 版本，變更物始化說明。 完整範例

當要計設的畫面與非同步方法掛勾時，就需要有個方法進行同步。 最常見的例子就是：把從伺服器下載來的資料，顯示在畫面上。 通常可以先建立一個空的資料物件（例如 List），事先把這個物件塞進元件裡；等到非同步處理完成後，再把資料寫入剛建好的資料物件，利用 setStatus() 重新渲染畫面，讓資料顯示在畫面上。 但這樣的方式，容易讓元件接到 null 值，使程式發生錯誤，賞用戶一個「紅屏」。 FutureBuilder 可以在進行非同步任務時，先在畫面上安排讀取（之類的）畫面提示用戶，等到資料下載好後，再更新畫面讓用戶看到真正的內容；就算是下載任務失敗，也可以安排提示錯誤訊息的畫面告知用戶。 FutureBuilder 在處理非同步載入，比更新物件後 setStatus() 更方便，且更有彈性。  首先建立一個非同步任務。 本案是為了示範 FutureBuilder 的用法，用 Future.delayed() 刻意放慢回應速度。 接著建立一個 FutureBuilder 並在 future 參數中，代入剛剛建立的非同步任務。 最後在 builder 參數中，決定程式各階段要顯示什麼樣的畫面。 Builder 內會用 ConnectionState 判斷非同步任務的每個階段，在各階段會展示各自的畫面。    讀取完畢 讀取時發生錯誤

有時候要設計操作流程，會想要將某個元件暫時藏起來，稍候再顯示出來給用戶使用。 這時就可以使用 Opacity 這個 Widget，透過 opacity 參數，操控這個元件的透明度，opacity 參數一定要是 0 到 1 （含）之間的數值。 而 0 到 1 之間的小數，系統需要對畫面做額外的運算，在模擬器中可能會無法正常顯示半透明的元件。  opacity: 0.5 opacity: 0.0 opacity: 1.0 完整範例：

在洽談 APP 開發案件時，有時會收到使用者介面動畫的需求。除了 GIF 圖片和影格動畫外，有更好的選擇。 動畫元件 AnimatedContainer 的功能和 Container 一樣，但是在參數的數值變化時，元件會「逐漸」變成指定的狀態（例如新顏色、新形狀⋯⋯等）。    以這個案例，當畫面中的方塊被用戶點擊時，方塊顏色會在 2 秒內從藍色變成紅色，方塊從「高、細」變成「矮、粗」，方塊內的 Flutter Logo 也會從正上方跑到正中間。 其中的 curve 屬性是動畫進程的曲線，此例的「Curves.fastOutSlowIn」會讓動畫由快轉慢地播放。至於 Curves 的其他內容，可以參考這個 類別的官方文件 。  這是動畫進行時的樣子。 完整示範：

Column 和 Row 適合將元件排成一列，但如果要放入的項目很多的話，有時會遭遇空間不夠，其他項目會被擠出去的狀況。 只要改用 Wrap 的話，就能使其他項目自動排到下一行。   可用 spacing 調整每個項目的間距；用 runSpacing 調整每行的間距。 這樣就不需要另外做 Padding 了。    也可用 direction 這個屬性改變清單陣列的方向。 這個 Widget 非常適合用在標籤列（Tabs）的製作。 官方文章

當設計師排板時，最常用的 Widget 不外乎是 Column 和 Row。 但僅是將每個項目依序放在一列，不夠美觀。 這時可用 Expanded 這個 Widget 將每個項目平均攤在一列上：  再搭配 Align 把內容置中，就會變得比較整齊了。 亦可利用 flex（延展性）參數決定佔滿畫面的程度。 完整範例 官方說明文件

現在的行動裝置，螢幕的設計逐漸多樣化：瀏海、水滴屏、圓角⋯⋯等等。 若要設計一個全螢幕查詢資料的畫面，在不做其他措施的情況下，想必會在一些設備中呈現出不如預期的畫面。