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

Подписаться 228 тыс.

Просмотров 20 тыс.

50% 1

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!

Опубликовано:

16 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 30

@moisesbinzie 6 месяцев назад

I finally understood rive animation implementation today, thank you ^♾

@TheFlutterWay 6 месяцев назад

You are most welcome.

@roninspect4357 6 месяцев назад

that's very helpful, Thanks a lot!

@TheFlutterWay 6 месяцев назад

You're welcome!

@nupecartoontv 6 месяцев назад

This is awesome ❤

@TheFlutterWay 6 месяцев назад

Glad you like it!

@anasalbattiri003 6 месяцев назад

Cooooool, Keep going ❤

@TheFlutterWay 6 месяцев назад

Thank you, I will

@huseyinburakinci2755 5 месяцев назад

really great, thank you. I have a question How can I add text under menu icons?

@aborayan5268 6 месяцев назад

That moves Flutter apps on the far stages 😮

@TheFlutterWay 6 месяцев назад

Glad you like it!

@MWStudiooo 6 месяцев назад

Awesome 🤩 bro how did you add the voiceover in the video?

@TheFlutterWay 6 месяцев назад

Glad you like it!

@MWStudiooo 6 месяцев назад

@@TheFlutterWay voiceover?

@vinz517 6 месяцев назад

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

@Cowboy-yv9xl 2 месяца назад

in scaffold extendBody: true,

@AhsanAli-vb8cg 6 месяцев назад

can you explain how to build lives wallpaper in flutter

@wafaeel-hijary7676 6 месяцев назад

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

@neerajmehta42 4 месяца назад

how can i download those rive animations separately ????

@AdhamFaisal875 6 месяцев назад

need also Make A Sound Recorder In Flutter with saving in screen as audioPlayList

@afrobeetzmuziks 17 дней назад

Hello pls i cant find the download button on the rive page, is there any other way to get the rive assets

@ismaelperezmesa524 Месяц назад

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.

@Abdulbosit-ep3py Месяц назад

bro, did you download the animated icons, i don't know how to download it from rive

@Abdulbosit-ep3py Месяц назад

has anyone pulled animated icons i don't know how to pull it from rive please teach

@ALMEER1177 9 дней назад

Do anyone have the source code ?

@kamrujjaman9282 6 месяцев назад

Hello Abir Bhai 🙃

@TheFlutterWay 6 месяцев назад

Hi 👋

@kamrujjaman9282 6 месяцев назад

@@TheFlutterWay আমি নাবিলা নতুন RU-vid channel খুলছি

@flutter_cavalieri 4 месяца назад

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.