flutter: best way to implement inner navigation with bottom nav bar - flutter

I'm developing a flutter application and I'm now struggling to understand what is the best way to implement a complex bottom bar navigation.
Here are my requirements:
each button on the nav bar should lead to a different section
each section should be able to have multiple screens inside of it
user can navigate from any page of a section to any page in another section and back
each section should show the last visited page if we come back to it
for example, let's say we have two sections, each made of two pages: SectionOneA, SectionOneB, SectionTwoA, SectionTwoB.
A few use cases:
user navigates from SectionOneB to SectionTwoB by pressing a button inside SectionOneB, when user presses back (on android) from SectionTwoB, we should navigate back to SectionOneB
user navigates to SectionTwoA by the nav bar, then navigates to SectionTwoB via a button in SectionTwoA, then navigates to SectionOneA via the nav bar and then press the SectionTwo icon in the nav bar again. we should show SectionTwoB. if back is pressed we should navigate to SectionTwoA.
in both these examples, when moving from one section to another, the correct nav bar item should be highlighted.
I'm new to flutter so I'm learning as I go. For now, what I've done is using nav bar with PageViewer to switch from section to section, then each section uses a PageViewer to handle switching from page to page. This worked well until I had to implement the first usecase above, at this point it seems to me that it would be quite challenging to implment a proper navigation stack as demanded by the usecase and I feel it would be better to rethink the whole thing, only I've no idea what is the best way to approach this.
A temporary solution would be to also include SectionTwoB in the PageViewer of section one, but that would not allow me to highlight the proper nav bar item.
Any lead on how to approach this? All the examples I find seems too simple and/or I'm failing at understanding how to connect the pieces together. I'm using flutter_bloc as a state management library.

Related

How do I set up a Navigation Link in SwiftUI on iPad so the buttons to navigate aren't in a sidebar?

I'm working on an app that I would like to have the following navigation structure:
I want to have a welcome view with "Sign up" and "Sign in" buttons as most of apps have:
First Page
I would like it to be such that this view doesn't have any navigation view bar at the top but the two buttons will navigate to the appropriate page e.g. the sign in page will ask for just login info, sign up page with ask the user for data.
Sign In Page
This however, while seemingly simple has been very confusing to achieve in SwiftUI when it comes to the iPad. When I try to use the Navigation Link it doesn't work as the links are stuck in a side bar that is hidden. I can't seem to find any solutions that work online as nearly everything is for the iPhone. Can anyone advise how to stop the links being placed in a sidebar on iPad?
Thanks a lot

Flutter - Bottom bar with different number of screens

an app should be controlled via three navigation points in the foot.
The first point is just one side. The second point consists of a PageView.
In the third point, a list (navigation bar) should be scrolled through and offer many screens.
Is it technically easy to do? I successfully implemented the first and second point.
I still fail on the third point. I want to ask if there is a simple approach to this that I may be overlooking.
My code seems to be going messie: /
It should also be possible, for example, to insert a button in the first "single screen" that references a specific page of the "bottom app bar".

try this
Flutter curved navigation bar plugin you can create flutter custom bottom navigation bar in your project.
link 1
link 2

Multiple stacks with a persistent navigation bar?

I am trying to build an app using flutter that has a bottom navigation bar that remains in view through sub pages. Any help?
I'm very new to flutter and coding in general. I've been able to get a working material navigation bar that highlights the current page but when I push to another route on that page, the bar disappears. This convention would work for some areas of my app, but a few pages are 3 "layers" deep and I would like to keep the bar so the user maintains a sense of place.
From what I've researched, Cupertino's navigation bar allows for this but I would prefer accomplishing this with material bottom navigation and routing.
Here's a general look at what I'm trying to accomplish (minus login/splashpage/onboard/etc.)
Prototype showing the routing of my app
Thanks to anyone who can help!

A Navigation Stack for Search result for Ionic Framework

Does anyone have any idea for the following scenario?
I do have a tab sample and some tab views will integrate with the search bar view/function at the navigation bar.
Views from search results are actually live in some tabs.
How can I share the view of the search results on a certain tab where I have searched for items.
(note that view of a search result is actually live in one of the available tabs)
Here is an example:
I do have three tabs on my platform as follows:
each of the tabs will have the search bar.
Home | Map | More
I do have a profile view at the "More" tab.
If the user searches for a profile at the "Home" tab, how can I show the existing profile view at the home tab instead?
Besides that, I would like to make sure the navigation stack for any search results are always staying at the place where the user trigger search function. In this case, any search result navigation stack will
be tracked and displayed at the "Home" tab instead.
You help will be much more appreciated.

Wizard style of interface in iPhone

How would one implement a wizard style interface for the iPhone?
For instance I have a form that I would like to break down into 5
different pages or views instead of putting all the information to fill out
into one page or view.
This interface must have the ability to go prev or next in case they want
to change something on page 2 when they are on page 4.
This interface must have the ability to go to page 3 directly and still be
able to go prev and next. Seems like using UINavigationController wouldn't
work here since views 1 and 2 are not on the stack so prev would not work.
Update: Check out the "gas cubby" application. It has what I'm looking for. UITableView presents the items you can fill out. Selecting a row takes you to the detail view to enter data and prev and next to fill in other information.

UINavigationController seems like the obvious solution. It gives you nice, familiar page transitions for free, and if you need to jump to a specific page you can just set up your navigation stack without using the transition animations.

I would say use a Navigation Controller. On the 1st view, show the 5 options in a Table View. The user selects a row, and then the corresponding section is pushed onto the stack as a new UIViewController. So, if they are in view #3 and want to go back to view #1 (to be honest, I would recommend rethinking whether or not somebody in the real world will actually want to do this), they hit "back" and then select view #1 from the table.
I can't think of a better way to do this because you won't have room to do something like breadcrumbing, which Apple would recommend against anyway. You could use a tab bar but that is more like options then some sort of wizard workflow.

If you really want them to be able to skip around the process, the combination of a UINavigation controller with a UISegmentedControl to jump to sections would do what you want. You can either embed the segmented control in the nav bar or place it just below the nav bar (which seems more like what you want since you have five sections).
If the Segmented control is not quite to your taste just put up any set of five buttons to change sections and make them visually appealing.

A "wizard" UI is typically used when you have a relatively small number of steps where one step depends on the previous, at least at some steps, the results or presentation depends on previous steps. This is like a navigation tree that usually results in the use of the navigation controller, but with only one potential branch at each each step. My feeling is that the navigation UI would be perfect, but with one exception; A button on the right hand side of the navigation bar that is the left to right mirror image of the "back" button that is usually found in the left part of the navigation button. That button would navigate to the the next step, and at each step the page presented would allow the user to fill in the information for that step. The only problem then is navigating to a step not the next or previous, and this could be corrected with a custom button that includes a drop-down list of the steps in the process. And this would fit nicely with the rest of the iPhone UI, which Gas Cubby's wizard UI (as good as it is) does not.