🔥Looking for more content, further content, and a helpful community? Why not consider joining The Digital Pro's #Nocode Academy at www.thedigitalpro.co.uk
Amazing thank you so much. Really pleased it helps you. Remember also you have the added flexibility of now customising it to you liking. I.e more rounded borders etc.
@the_digitalpro I am trying to implement unread notification indicator and unread messages on my nav bar buy I'm having a hard time for both data structure and implementation.
@@endieumunna6900 You would need to create some component parameters to track the notification count. I suggest then to create some app state variables to store number of messages which are hooked up to the component parameters. You can then check within the Nav bar for values greater than 0 and then display the number of notifications above the icons. I suggest using a stack widget on the icons to denote a notification.
@the_digitalpro I was able to achieve that for unread notification but I haven't figured out unread messages. I am using flutterflow built in chat actually. For notifications, I added a data field to users collection - 'Last notification read time.', then on the notification page, I added an action to the scaffold upon page navigation to UPDATE AUTH USER'S Last notification read time. Then I queried the notification badge on the nav bar to show notification document where Last notification created time is greater than Last notification read time. It worked! I am not able to figure out unread messages on my bottom navigation badge yet. I am really grateful for this tutorial. I learnt a whole lot.
Just wanted to thank you for creating this content! I'm new to FF and this helped solve a limitation I encountered with the delivered Nav Bar. Clear, concise and well-structured delivery. Thanks again!
Hi there! Thanks for the vid! I have an issue when I am following your instructions: while everything is smooth in the transition of pages in your example, in my case, there is a 'bump' when it navigates from one page to another, i.e. the nav bar does not stay completely fixed at the bottom of the page. It kinda 'flickers' before the page is loaded. Any idea how to fix this issue?
a very detailed and well explained tutorial, I knew nothing about conditions or components in flutterflow and now I am using them to implement custom features in my App. Extremely helpful
Thank you for such a delightful comment. So pleased my videos helped. This is why I enjoy putting together more walk-through style content to give everyone a chance to learn by doing. Thank you again.
Very interesting video, thank you! Just a curious question, why do you add a container before putting the stack? Couldn't we put directly the stack after the scafflod? I'm asking this because it might explain why I have a custom navbar that sometimes 'jumps' towards the top before moving to its correct place on some pages, and I really can't figure out why to this day!
Great video! Would it also be possible to create a custom App Bar that we could then select like the four default types (i.e. "Large Header", "Large Header --> Back Button", "Back Button --> Center Title", "Back Button --> Left Title")?
Thank you for the walkthrough! How can I stop the pages and navbar from reloading every time we switch between pages? Your demo shows that navbar stays and only the pages get loaded.
Flutter is smart, and only reloads the stuff that has actually changed. So if your navbar has not changed, it will not touch it, and will only load the page around it.
Thanks for the video! amazing edits and content! very professional! I got a question if i may, what if i want to use a Dropdown menu on the "Settings" Icon, im stuck on the visibility of it i've already created and custom NavBar and combine it with a Dropdown to acces the accounts settings, but is not hiding/showing, thanks in advance!
Thanks for this video 😊👌 Is it possible for this custom Nav Bar, add collapsing feature? I mean when user scrolls down, the Nav Bar collapses and when user scrolls up, the custom Nav Bar expands. I know in App Bar we have SilverBar which gives this capability
Hiya TDP, this is an excellent tutorial! Question, how would I change the icons from say Outlined to a non outlined? THere's a property to do that but not sure what to put in the "Then" "Else" fields
We're mimicking the AirBnB app functionality where you can change the user experience from a Guest to a Host by clicking a button in the menu. The Navbar that comes out of the box didn't support different navbar types so we had to make a component instead for each experience of the site@@the_digitalpro
@mrbdrm2 at the time this tutorial was created there were very little options in the marketplace. Additionally learning to do this by yourself will increase knowledge in the product.
Thank you, Steve; I have cloned the final app and cloned the starter. On both occasions, neither showed the floating navigation as you described in the video. Please assist Or test on your side. At least the final product, once cloned and the test is clicked on, would work, but it does not. I also noticed that Project Test Step 2 has an invalid widget selected. - 🤐I have realized that only while clicking REVIEW was I able to see the floating nav. - my bad..
there is a very major issue by creating this type of custom navigation bar , if there is any textfield in our screen our navigation bar will also popped up with our keyboard. Any solution for this?
Can you talk about how you can have different navigation be based on the page. Thats different from the home navigation bar. Let’s say you click the profile icon on your main home navigation bar and when the profile page loads up you have a different menu. How would you implement that?
Create all the navbar items you need for the app and then follow the same directions he illustrated to show/hide the divide line, with one caveat. Instead of just hiding/showing the divide line, use the visibility parameter of the whole column that contains the icon and line. ie, if on Home page, the first 4 columns are visible, if on the Profile page show another 4 columns). Otherwise you could create additional navbars.
@@the_digitalpro Yes, so like the default menu bar that Flutterflow offers, is there a way to keep the custom menu fixed at the bottom of the screen, so when scrolling it would be behind the custom menu. unless im missing something, the current menu i have scrolls does no appear until i scroll down
Hi Thank you for your comment. Absolutely I already have a few specific smaller video pieces and articles on Patreon. More will follow soon as build up the content on both. RU-vid will remain my primary channel for content where as Patreon will be more focused around work in progress material, early sample apps, ongoing articles and small time saving videos. Within the next couple of months there will be quite alot of content on Patreon. Hope this helps.
Great video but how can I add FAB when I use a custom navigation? When I tried adding a floating Action button, it doesn't stay above the bottom navigation bar. It stay just on it. Kindly add that and I'll be more grateful thanks.
The the FAB button acts independently from the actual navigation bar and you have limited customisation options within FlutterFlow. My suggestion would be to actually simulate the FAB button by creating something similar such as a rounded container with a icon button inside. You can then place this within the stack to float above the navigation bar by say another 16 pixels. This will give you the desired look you need. Simple solution. Hope this helps!
@the_digitalpro awesome but I want to ask a question about this. If I do this, and place the FAB on the right hand side 16px above the custom navbar, will the elements on the listview on the left side of the same row as the FAB be clickable? Won't the stacked container still take up that clickable space? Such that, I'd have to scroll the listview higher for it to be clickable?
@@endieumunna6900Yes, if you stack an FAB button on top of your list view and your clickable element sits under it then you’ll have to scroll your list to above the FAB button in order to click it. You can either add additional pixels to the end spacing parameter OR you may need to rethink your UI a little to accommodate (for example you could make the whole list item clickable instead of just one element on the far right hand side.) I’ve actually built an FAB button in to the middle of my bottom navbar so that I don’t need to accommodate both elements.
@@the_digitalpro you inspired me to make the comment in the first place ;). this was a fun one i am going to use the patter in my projects! I was trying to do a hero animation on a component to keep it "in place" but was getting weird errors with text but I think you've found a perfect solution
What's missing for me is navigating between pages within a single tab. For example, in home, if you click on a product it should navigate to a product page. How do you maintain the navigation to behave like native apps where each tab has it's own stack. And even more important, what if you can navigate to a Product page from both the home page and from the Notes page. How do you display the right navigation icon on each separate instance of the Product page, and then how do maintain the stack when jumping from tab to tab (if the behavior i am describing is unclear, use any social media app like IG, Reddit, or Twitter to see what i mean.). Thanks in advance.
This is soo impressive, thank you soo much for your dedicated training. I also need personal guidance on the project am working on now, is there a chance sir?
Hi thank you very much. Unfortunately I cannot offer any personal consultation at this time but happy to take note of your challenges so I can perhaps put together content that everyone can learn from. Many thanks.
Thank you, the video is very interesting. I would like to know how it is possible to change the icon from outline to filled. It occurs to me that it is to use the 'Stack' and enter the visibility conditions, could it be?
That's exactly what I did.. Would be cool to make icons/image sources a dynamic field like everything else. If you notice he had a dark mode boolean in his app constants, you could use something like that, or pass a param, etc. But yep, I do the same to show different images as well (ie 3 stacked images but I only show one based on a data value). g/l!
Thanks for your great videos. The only issue I have is that your audio needs some work. The audio quality is not great. Can be much clearer and slightly louder.
Great video thank you Steve! I’m having one small issue with placing the navbar however. No matter what I do my vertical scroll stops working on my page content. It doesn’t matter if I place the navbar directly in the stack element or wrap it in containers, rows, columns etc. Does FF get sensitive to any particular configuration that you are aware of? I’ve copied your approach exactly, have proper separation of the layers (navbar is sitting above the content & content stretches to bottom of the page) and am still having issues.
I have the exact same issue, have you been able to find a solution to the problem? Also, after adding the nav bar, it occupies the whole screen in the editor, so I can't change anything until i hide it from the editor. Aaaaand another bug I encountered is, that when there's a page that does an API call, and you go to it, it takes some time for the nav bar to show :( pretty annoying
Certainly for bottomsheets I suggest you set the isHidden component parameter to true when bottomsheets are displayed. Set it back to false when the bottom sheet is closed.
Thank you so much, your videos are outstanding, and extra thanks for giving us access to the application for us to try out and learn from as well, this really helps a lot 💯😃👍
Thank you Paul for the kind words. Appreciate the feedback. I think the sample apps are an important part to learning and where possible I always make them available.
