Build a Custom Bottom Navigation Bar in Flutter with Animated Icons from Rive
HTML-код
- Опубликовано: 30 июл 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!
This is awesome ❤
Glad you like it!
Cooooool, Keep going ❤
Thank you, I will
really great, thank you. I have a question How can I add text under menu icons?
That moves Flutter apps on the far stages 😮
Glad you like it!
Hello pls i cant find the download button on the rive page, is there any other way to get the rive assets
how can i download those rive animations separately ????
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,
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
Awesome 🤩 bro how did you add the voiceover in the video?
Glad you like it!
@@TheFlutterWay voiceover?
can you explain how to build lives wallpaper in flutter
Do anyone have the source code ?
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
has anyone pulled animated icons i don't know how to pull it from rive please teach
need also Make A Sound Recorder In Flutter with saving in screen as audioPlayList
Hello Abir Bhai 🙃
Hi 👋
@@TheFlutterWay আমি নাবিলা নতুন RUclips 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