Flutter 每週尤物－第四週：AnimatedContainer

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

完整示範：

留言

張貼留言

這個網誌中的熱門文章

Flutter 動態配置多環境 - iOS Scheme 配置

圖片
iOS app 同樣也有區分 app 名稱和套件名稱的需求，但現在嘗試帶 --flavor 參數建置 iOS 版 app 的時候，會得到以下訊息： 字面上的意思是沒有設定自訂 Scheme，稍後要移至 Xcode 進行建立 Scheme 的程序。 建立自訂 Scheme 在 VS Code 對著 ios 資料夾按右鍵，在選單中點擊 Open in Xcode。 在 Android Studio 是在選單中點擊 Flutter -> Open iOS module in Xcode。   出現 Xcode 後，點擊目標選擇器，在出現的選單中點擊 New Scheme…   Target 要選擇 Runner，Name 要輸入與 EnvName 相符的數值，本例為「dev」。並以相同方式建立 beta 的 Scheme。 接著點擊 Manage Schemes… 對著預設的 Runner 按下 Return(Enter) 鍵，重新命名為「prod」。完成每個 Scheme 的建立。   再次嘗試建置 Flutter app ，仍然出現錯誤訊息。 大意是要在 Debug 模式執行 prod 組態，預期會有名為 Debug-prod 的建置設定，但是現在沒有。 建立 Xcode 建置設定 點擊專案檔 -> PROJECT 下的 Runner -> Info 標籤。 在 Configurations 建立所需的設定 Flutter iOS 模組預設存在這 3 種設定： Debug Release Profile 這是對應 Flutter 支援的建置模式，稍後會以這些設定，延伸出本範例需要的設定檔。 更詳細的說明，可見〈 Flutter 的构建模式选择 〉。 按下＋按鈕，點擊 Duplicate "Debug" Configuration 選項。在複製出來的項目中，重新命名為「Debug-dev」。其中 Debug 是 Flutter 支援的建置模式之一，dev 是本範例自訂的組態。 以同樣的方式建立「Release-dev」、「Profile-dev」，成果如附圖。   以同樣的方式處理 beta 組態，成果如附圖。   最後將預設的設定名稱，重新命名為 prod 適用的...
閱讀完整內容

Azure 建立 Windows 虛擬機器

圖片
 Azure 也能建立獨立的虛擬機器，使用體驗與 VM Ware 和 Virtual Box 雷同，只是資料是放在雲端。 以下是建立虛擬器的流程。 在首面點擊「虛擬機器」按鈕，進到管理介面。然後按一下左上角的「建立」。 在彈出的選單點點「Azure 虛擬機器」。 在建立頁面填寫相關資料： 資源群組 - 如果沒有自動新建的話，可點擊欄位下方的「新建」 連結，與這台虛擬機相關的資源都會放在一起。 虛擬機器名稱 - 取一個可以識別的名字 影像 - 本例選擇「Windows 11 Pro - Gen2」，也可以選擇「Windows 10 Pro」。 Administrator 帳戶 - 輸入可以被記住的帳號和密碼 大小 - 建議選擇雙核心 8 GB 記憶體的項目，確保虛擬機可以正常運作。（注意價格） 選取輸入連接阜：勾選 RDP（遠端桌面）、Http、Https 將「我確認我有具備多租用戶主控權限的合格 Windows 10 授權。」項目打勾。 填寫完畢後，點擊「檢閱＋建立」跳過中間的步驟。 確認資料和價格後，點擊「建立」。 在管理介面，點擊連接 -> RDP。 點擊「下載 RPD 檔案」。 在 Windows 雙擊 RDP 檔案（Mac 要下載 Microsoft Remote Desktop，將 RDP 拖至視窗中），連線到虛擬機器。 登入虛擬機器後，在控制台啟用 IIS 網路伺服器。 安裝完畢後，開啟新分頁，將管理介面提供的公用 IP 貼到網址列並連線，有看到 IIS 的初始畫面的話，就代表設定成功。
閱讀完整內容