OnBoarding & Login Modal UI - Flutter & Rive - Part I
🎬 Part II: • Custom Bottom Navigation Bar with animated...
🎬 Part III: • Custom Animated Sidebar/Drawer with animat...
🔗 Source code:- https://github.com/Aashu-Dubey/flutte...
🌐 Web demo: https://aashu-dubey.github.io/flutter...
🌻 Inspiration: https://designcode.io/swiftui-rive-an...
🔗 References as mentioned in the video:
1. Initial Setup (00:01:12 - 00:02:28):
i. assets: https://github.com/Aashu-Dubey/flutte...
ii. pubspec.yaml: https://github.com/Aashu-Dubey/flutte...
iii. theme.dart: https://github.com/Aashu-Dubey/flutte...
2. Creating Shapes animation inside Rive editor (00:06:04): https://designcode.io/swiftui-rive-ba...
3. Creating Button animation inside Rive editor(00:10:04): https://designcode.io/swiftui-rive-bu...
4. RepaintBoundary (00:50:44): • Improve your Flutter Apps performance with...
📦 Configurations and packages used:
Flutter: 3.3.10
rive: 0.10.1
📚 Chapters
(00:00:00) Intro
(00:00:35) Inspiration
(00:01:12) Project Setup intro
(00:02:29) Designing OnBoarding UI
(00:15:57) Designing SignIn screen
(00:35:52) Using SignIn view as a modal and other animations
(00:50:37) RepaintBoundary
(00:51:52) SignIn validations with Rive success, failure and confetti animation
(00:57:46) What is State Machine in Rive?
(01:09:34) Outro (What’s next?)
🔖 Topics Covered
OnBoarding UI
SignIn UI
Using SignIn UI as custom modal with transition animation
Using and controlling Rive assets for animation
SignIn validation with rive animated icon for success and confetti
Some Rive topics like Artboard, State Machines, one-shot animation etc.
Some flutter Widgets like RepaintBoundary, ImageFilter, AnimatedBuilder etc.
🌐 Other distributions:
Facebook: https://fb.watch/oQB-8cL0Sz/
⚙️ Tips:
1. Adjust Playback speed if you find me speaking or video itself slow (or fast?).
2. Enable subtitles if you’re having trouble understanding whatever I’m saying.
FOLLOW ME ON:
GitHub: https://github.com/Aashu-Dubey
Twitter/𝕏: / aashudubey_ad
Instagram: / massive.educator
Facebook: / massive.educator
➡️ All my links: https://bio.link/ashud
Support 💖
You can support me by subscribing to the channel and/or voluntarily sponsor through any of the following ways 🙂
1. https://github.com/sponsors/Aashu-Dubey
2. / ashud
3. https://buymeacoffee.com/ashud
🧑🏻💻 My Equipments - Affiliates (if you buy anything through these it will support the channel and allow me to improve the content quality!):
Macbook Pro: https://amzn.to/3VyfxHv
USB-C Hub for macbook: https://amzn.to/3Fa8sYt
Windows Laptop: https://amzn.to/3u84OIg
Tags 🏷:
Welcome screen in flutter
sign in UI in flutter
Animated onboarding in flutter
#flutter #dart #flutterui #opensource #354