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.flr
Flutter + 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。