Wallet App UI Flutter Workshop
Wallet App
A minimalistic, animated Flutter wallet app UI built for the workshop conducted at the Flutter & Friends conference in Stockholm, Sweden.
In this workshop, you learn how to add animations with gradually increasing complexity to a Flutter Wallet app UI to bring it to life.
📃 Article version coming soon…
Chapter 1 – Onboarding Page
Introduction to simple implicit and explicit animations by adding simple animations to the onboarding page.
🔗 Preview the code of the animation
1-on-boarding-page.mp4
Chapter 2 – Stack of Dismissible Cards
Utilizing user input to implement a stack of animated dismissible cards. Cards can be dragged by the user and can either animate back into place, or get thrown and fade away is a direction that depends on the location the user dragged them to. The cards are implemented such that they infinitely loop with the dismissed card returning to the back of the cards.
🔗 Preview the code of the animation
2-cards-stack.mp4
Chapter 3 – Cards Hero Animation & Custom Page Transitions
Implementing custom page transitions and highly customized Hero animation. The key here is using the Hero widget’s flightShuttleBuilder parameter to return the animated widget. Because the way the Hero widget works with Flutter is that behind the scenes, there are actually 3 widgets, the child of the Hero widget in the source page, the child of the Hero widget in the target page, and another widget for the animation hapenning in between, and the flightShuttleBuilder is how you can override that widget and perform any animations on it, no matter how complex, with the help of the Animation object provided in the parameter’s callback.
🔗 Preview the code of the animation
3-hero.mp4
Bonus – Slide to Pay Animation
Based on all the concepts covered before, this slide-tp-pay animation includes draging functionality, and uses a mix of implicit and explicit animation widgets. Check it out for some practice!
🔗 Preview the code of the animation
4-payment-button.mp4