Build a Custom Bottom Navigation Bar in Flutter with Animated Icons from Rive

The Flutter Way January 7, 2024
Video Thumbnail
The Flutter Way Logo

The Flutter Way

@theflutterway

About

Want to improve your flutter skill? Join our channel, learn how to become an expert flutter developer and land your next dream job!

Latest Posts

No results found. Try different keywords.

Video Description

Today I will show you how to build this custom bottom navigation bar in Flutter with animated icons from Rive. 🔥 Animated Icons: https://rive.app/community/1298-2487-animated-icon-set-1-color/ 📰 Article: https://medium.com/flutter-community/build-a-custom-bottom-navigation-bar-in-flutter-with-animated-icons-from-rive-13651bc80629 📦 Source Code: https://www.flutterlibrary.com/templates/animated-app-with-rive [Full animated app] 🔗 Live preview: https://abuanwar072.github.io/Build-an-Animated-App-with-Rive-and-Flutter/ ►For the 3D intro, I'm using Rotato: https://bit.ly/3heGagj ►Support Us: https://www.patreon.com/theflutterway ► Social Media GitHub: https://github.com/abuanwar072 Twitter: https://twitter.com/theflutterway Twitter: https://twitter.com/abuanwar072 (my personal profile) Facebook: https://www.facebook.com/theflutterway ► Timestamps 0:00 Intro 0:15 Project Setup 0:34 Download Free Animated Icons 0:40 Animated icons setup 0:57 RiveModel 1:04 What is an Artboard & State Machine? 2:00 Build a custom bottom nav bar 3:10 Show Animated Icons on the bottom nav bar 4:15 Animated Icons controller 6:02 Code refactor 6:57 AnimatedBar 8:27 Performance Optimization: Dispose the controllers 9:03 Setup pages for each tab 9:25 Thank you 🙏 Thanks for watching! Make sure to like + Subscribe For More!

You May Also Like