Build a Custom Bottom Navigation Bar in Flutter with Animated Icons from Rive
Вставка
- Опубліковано 22 лип 2024
- Today I will show you how to build this custom bottom navigation bar in Flutter with animated icons from Rive.
🔥 Animated Icons: rive.app/community/1298-2487-...
📰 Article: / build-a-custom-bottom-...
📦 Source Code: www.flutterlibrary.com/templa... [Full animated app]
🔗 Live preview: abuanwar072.github.io/Build-a...
►For the 3D intro, I'm using Rotato: bit.ly/3heGagj
►Support Us: / theflutterway
► Social Media
GitHub: github.com/abuanwar072
Twitter: / theflutterway
Twitter: / abuanwar072 (my personal profile)
Facebook: / 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!
I finally understood rive animation implementation today, thank you ^♾
You are most welcome.
that's very helpful, Thanks a lot!
You're welcome!
really great, thank you. I have a question How can I add text under menu icons?
This is awesome ❤
Glad you like it!
Cooooool, Keep going ❤
Thank you, I will
how can i download those rive animations separately ????
That moves Flutter apps on the far stages 😮
Glad you like it!
can you explain how to build lives wallpaper in flutter
could you please recode a video for explain to us how do you monte this video i want to made a video like this i don't know how
Hello pls i cant find the download button on the rive page, is there any other way to get the rive assets
Very cool tutorial! Do you have some advice to allow scroll under the bottombar and safe area? I would lke to see my view srolling under the bottombar
in scaffold
extendBody: true,
Do anyone have the source code ?
has anyone pulled animated icons i don't know how to pull it from rive please teach
Awesome 🤩 bro how did you add the voiceover in the video?
Glad you like it!
@@TheFlutterWay voiceover?
need also Make A Sound Recorder In Flutter with saving in screen as audioPlayList
Hi!! Excellent video!! I have a performance problem when I load a Rive Animation in my flutter app, I'm using an iphone 15 pro device and when it loads the animation the cpu works at 80% and makes the device heat up, I'm already using skia as a rendering engine. This happens even without having any simple svg shape in the artboard (in the rive side), just having a timeline animation even empty is enough for get this behavior on the device. How can I fix this? Any Suggestions ? Thanks a lot.
bro, did you download the animated icons, i don't know how to download it from rive
Hello Abir Bhai 🙃
Hi 👋
@@TheFlutterWay আমি নাবিলা নতুন UA-cam channel খুলছি
There was no problem until I got to the line "artboard: bottomNavItems[index].rive.artboard". Although I wrote this line, the animation does not appear. Only icons appear as pictures. There is no movement. What could be the reason for this? I wonder if I didn't download the riv file as it should be? The download option was not on the riv page. There are Preview Rive and Remix menus.
Same