Course Hive
Search

Welcome

Sign in or create your account

Continue with Google
or
Build a Custom Bottom Navigation Bar in Flutter with Animated Icons from Rive
Play lesson

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

5.0 (3)
20 learners

What you'll learn

This course includes

  • 3.5 hours of video
  • Certificate of completion
  • Access on mobile and TV

Summary

Keywords

Full Transcript

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!

Course Hive

Continue this lesson in the app

Install CourseHive on Android or iOS to keep learning while you move.

Related Courses

FAQs

Course Hive
Download CourseHive
Keep learning anywhere