Flutter - Custom Shaped Bottom Navigation Bar (From Scratch) | Flutter UI Design Tutorial

not perfect on tablet, ipad devices

Sir how can create label below on Icon in bottom bar, please help me thank you

Very deep explanation thank you so much 🙏🏼🙏🏼🙏🏼

nice man. really nice explanation.

Fake accent .

Why is it not possible to have the shape be given by an svg? It seems rather laborious to draw everything by hand

Thanks. Easy to follow and understand the concept. Awesome work.

I loved the video, thank you!!!... one question... in case we add the Safearea, how do you manage the height to cover the extra space at the bottom?

year 2022 and you're creation is still awesome, keep coming Boss 👍

good job man

Very good example! The only problem I find is that when using onTap() on the FloatingActionButton nothing happens. If I remove the HeightFactor property from the Center it works fine. Why it happens?

Me at first
This guys using android feel sus
After the formula explained
Holy shit best explanation EVER

Hey RetroPortal Studio, I'm a huge fan of your videos and kinda new to dart and flutter.
I tried to incorporate this example in an existing demo of me, but somehow when I change the bottomNavigationBar on my home/start screen from my existing one to this example, it overrides the list I have as body, but only if I use this example, is there something which overrides my existing body in your example or did I do something wrong in the way I call it? I've been looking for a solution for several hours now :<

I would appreciate if you or someone else have any suggestion :) and keep your nice content coming!

Kotlin????

Hello thumbs up for this great video. One question though, the background rectangle (where the custom shape literally sits) has a color of white. How can i change that to transparent?

It is possible to animate the navigation ? For example when changing page, the selected icon become bigger and the bottom navigation bar sort of move following the selected icon

subscribed. good job sir. well explained. thank you

subscribed. good job sir. well explained. thank you

Thanks a lot

wow, great !!

Great dear. You are the best

That was fantastic !!

Outstanding video - thanks for taking the time to post. You've got a new subscriber :).

👏

Cool. But don’t you need to use the scaffold bottom nav property and pass on your custom widget?

Thank you it is an awesome tutorial ! I love your videos ❤

Great tutorial!!!!!

awesome

amazing

You are genius

Why not sharing the open-source code of the video?

What a good video, I am from Colombia, I would like to know how we can put this fixed CustomPaint as a BottomNavigationBar that when doing srcool it stays fixed?

amazing logic!

Very useful and instructive 👏👏 Thank you !

@RetroPortalStudio Excellent video! How do you assign different pages/screen to each button (while keep the buttonNavigationBar)? Thanks

I love this video. However, there is a problem. The customer bottom navigation bar disappears when you click to another page. I was able to implement that functionality in the bottom navigation bar. Is there a way you can help? For the navigation bar to be stick after on other pages.

How can I make it stick to all the pages, it's disappearing and when I tried to fit it to other pages, I'm getting infinite pixels error, please provide the solution!

if someone presses the other buttons and it navigates to another screen.. the bottom bar will disappear right? how to make it stick ?

thx a lot man but is there any idea to make the icon splash color visible ?

Do you have a complete flutter tutorial anywhere? I just like the way you teach and the loud and clear voice.

You're amazing dude. Seriously - and also a great explainer! Thanks mate!

thanks a lot it was really usefull

Nice tutorial, the problem with this approach is you can't keep the custom navigation bar on screen when you navigate to other pages.

This may look easy but in real ...... Awesome video Thanks

You're the best.

Now I understand this shapes and paint

one question, how do you take care of active class?

Thanks, It was great,
But i have a problem, when I set something like this (a stack navigation bar) as the navigation bar of a scaffold, it will overlap the body of it and i can not see the body of scaffold, anyone knows how to fix it?

hey we cant add movment to the icons after we select them like that curved bottom navigation? how

Amazing 😍