3 Tips to Create a Dynamic NavBar | Responsive Web App
HTML-код
- Опубликовано: 3 авг 2024
- This video will showcase 3 tips/methods to make your NavBars more dynamic. We walk through how to create an animated, expanding NavBar in the first section. In the second section, we showcase how to create a hover-state for your NavBar tabs + a selected state for your NavBar tabs. Also, there is a special announcement at the end to help you get started!
Sections:
0:00 Intro
0:21 Expanding/Collapsing Nav Bar
3:11 Selected State + Hover State Nav Bar
7:21 Let's get you started
If you want a live walkthrough, check out the livestreams below:
- Animated Sidebar Livestream ( • Animated Sidebar Menu ... )
- Live Building a Responsive App ( • Live Building Responsi... )
Ready to try FlutterFlow for yourself? Start building your app today with a free trial 👉 www.flutterflow.com
Follow us on Twitter 👉 / flutterflow
--------------
FlutterFlow is a low-code builder for native apps, bringing design and development into one tool. With drag-and-drop functionality, you can build pixel-perfect UIs and easily connect your app to live data via Firebase or APIs. Plus, you can add advanced features like push notifications, payments, animations, and more. Whether you build your own custom widgets or write custom code, FlutterFlow makes it easy to bring your app ideas to life. 
Наука
Pre-made bottom navs would also be cool. Thanks for this amazing product
Thanks for this awesome tutorial. I suggest making this as a widget instead of doing all this conditinal stuff and states, that works responsivly on phones and web.
I know there are some great templates available, but making it as a widget will save a lot of time and effort.
As always, Thank you FF team for your great Jop.
Awesome tutorial man! Thank you!
Could you make a video on how to use the Progress Bar? I have a lot of questions about this topic and I can't find articles on this topic?
This is what I need, thanks !!!
Another time saving tip is that you can simply use the navOpen variable on the first if condition instead of going through the whole steps of setting "navOpen == true", since the variable already is of boolean type.
Very well thought out and demonstrated here.
There are ALOT of steps aka mouse clicks and panels to visit to get this done.. why wont you guys introduce some kind of simple CSS + classes?? Things could get done faster and more maintainable!
Interesting tutorial. Would love to see how to switch from sideNav to bottomNav using components and making things as flexible and easily updated as possible. For example, if there are 4 pages: Home, Company, Contact, Profile; and then we add a new page, Quotes, both sideNav and bottomNav should be able to pick up on the new page and its icon without having to do a lot of copy-and-paste.
Hi, Could you make the clone of this project available?
Is this available as a full FF project template?
At 2.11 navOpen .. if you paste it gives an error "current variable is not valid" .
can someone answer what I can do if I don't want to show navbar at bottom, cause on web it's not needed but for navigation as video goes it's shows
At ruclips.net/video/oiG7b1zEb5o/видео.html (1:06) i don't have "Value Source" menu on my interface to input the "Specific Value"... Is this the reason that causes no reaction for my responsive navbar?
been trying this for days. background color does not change on hover or when on specific page. Please help
brother go through video one more time, you need to give navbarwidget parametrs(intiger) then use it on every screen, for example on homepage screen your sidnavbar component value is 1, on other screen 2, then 3 (it's at bottom of sidnavbar!
Hello
Can Flutterflow please make a video how we can add product in backend dashboard as admin? Thank u
I think u can use appstate for that
Just a note this tutorial is great but it is significantly to fast
Are you hurry to do sth?