Build A Login Screen With Flutter & Flare
Published in
3 min readMar 21, 2020
一直以來都知道 Animation 是 Flutter 的特點之一，最近剛好看到Rive開發了一隻可愛的天鵝Guss，因此寫了一款登入頁面的App。
本篇主要介紹 Flutter 與 Flare 的整合應用
Flare
一款線上動畫設計平台，能讓設計師快速設計出動畫，以及分享公開自己的作品。
接下來，說明如何將設計好的動畫匯出來給Flutter使用：
- Export出Binary格式的FLR File
- 將FLR File匯入Flutter專案Assets Folder中，並且在pubspec.yaml中宣告。
assets:
— assets/Guss.flrFlutter + Flare
- 加入 Flare-Flutter lib
- 使用 FlareActor 繪製出FLR檔的動畫，參數animation指的是要播放的動畫，這裡我預設播放的動畫是idle。
- FlareActor的參數animation，定義在Flare設計的動畫中。
- 如果想要繪製出不同的動畫的話，則更改animationType，並且透過setState來重新繪製，讓FlareActor播放新的動畫。以輸入密碼為例，當Password TextFormField被focus時，則將animationType設為cover_eyes_in，並且透過setState來重新繪製，讓FlareActor播放cover_eyes_in的動畫。
你可以在我的GitHub中，找到 Guss Project 的 Source Code。
