README.md

Animated App with Rive and Flutter

An application with interactive UI and animations, with custom UI components like Bottom TabBar and SideBar, and using animated assets from Rive.

Web Demo

👀 This is how it looks

flutter_rive_demo.mp4

📦 Packages used

1. rive: To render and control the Rive assets.

🔤 Fonts used

1. Inter-Regular.ttf
2. Inter-SemiBold
3. Poppins-Bold

🎥 Tutorials

Episodes
1. OnBoarding and SignIn UI 🔖 Topics Covered • OnBoarding UI • SignIn UI • Using SignIn UI as custom modal with transition animation • Using and controlling Rive assets for animation • Some Rive topics like Artboard, State Machines, one-shot animation etc. • Some flutter Widgets like RepaintBoundary, ImageFilter, AnimatedBuilder etc.
2. Bottom Tab Bar and Home UI 🔖 Topics Covered • Custom Bottom TabBar with animated icons • Home Screen UI • Update screen based on active tab
3. Side Menu and Wrap up 🔖 Topics Covered • Custom Side Menu UI with animated icons • Combining Side Menu and other parts of UI with Home • Presenting Side Menu & OnBoarding with animations as well as handling visibility of other UI elements

🌻 Motivation

This app is a full Flutter replication of this SwiftUI course by @MengTo.

🔗 Links

• SwiftUI + Rive: Original course in SwiftUI.
• 🎥 Flutter + Rive YouTube Playlist: Video tutorials with step-by-step implementation of the project from scratch.
• Ionic Rive: Ionic + Angular version for the same.
• Demo: web | youtube | twitter