I am wanting to include a Bottom Navigation Bar in my application that will be displayed on some pages but not other.
As I understand the the Flutter BottomNavigationBar widget re-renders the Scaffold Body property and does not actually route to another page and always shows the navigation bar. Would anyone have some advice on how I can have a bottom navigation that would look like the following where Tab 1 and Tab 3 route to a screen showing the navigation bar and Tab 2 and Tab 3 are screens that don't show the navigation bar?
Bottom Navigation Bar
I believe you want to show the bottomNavBar in tab 1and 3 while hiding it in 2 and 4 right? I presume you have a variable that keeps track of the selected index lets call it int _selectedIndex = 0. In the bottomNavigation property you can show and not show it like below
bottomNavigationBar: _selectedIndex.isEven ? null: BottomNavigationBar()
Here it checks the _selectedIndex value (0,1,2,3 in this case) and if that is odd you show the page and the navigations (Tab 1 & 3) while if it is even (Tab 2 & 4) then you supply a null thus not showing the navigation. The only concern becomes how to navigate outside the two tabs without navigation but this should solve your immediate problem
Related
I know how can I use tabbar or bottomNavigatorBar. I can create bottom bar with both of them but my question is which one is the best usage to create bottom bar? I mean, which one should I use to create bottom bar?
It will be design based, how you prefer. I prefer using BottomNavigatorBar for <=5 destination. Else, use with Tabbar sometimes.
Let's check the Google material about bottom-navigation
Bottom navigation bars display three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon.
I implemented tab bar in my application
and then I want tabbar screens to be change when the specific moments occur
but buttons should not be used (for instance, bottom navigation bar buttons)
if you have three tab buttons and assume current screen is first(index 0),
how to accomplish to go to page third?(index 2)
thanks
If you have a TabController even if you don't have a TabBar(but you have a TabBarView with that controller attached) then just use the method animateTo() with the index you want to move and a duration for the animation (if you want a different duration). tabController.animateTo(2)
I am building a flutter app where the user requirement is to build 3 tabs with each tab having custom AppBar which implies to have multiple Scaffolds in each view.
So I have main.dart, screen.dart, account.dart and post.dart
3 tabs => Screen, Account and Post
Screen View => Appbar with just name
Account View => Appbar with Hamburger Icon
Post View => Appbar with Plus icon
According to flutter we can have Appbar and Bottom Navigation Bar (Tabs Bar) inside Scaffold Widget. So to have multiple Scaffolds, I would have to make 3 seperate bottom navigation bar or is there any other way to achieve this functionality?
Also, if we need to make 3 different Bottom Navigation Bar per Scaffold, then how to navigate between them since my first view will be called from main.dart
Thanks for helping and taking out your time to answer the question.
I have many pages with the same bottom navigation bar title in my flutter app. For example, let's say I have two pages: A and B and page A doesn't have bottom navigation but page B has one with tree items. So I want to navigate from A to B but directly to the second or third item's index in bottom navigation items list.
When I build even the most basic default Tabbed Bar application in swift I have to click two times on the tab bar icon to change to the next view. How do I change this to only be a single click? It wasn't always this way, but now when I create any sort of tab bar controller it behaves like this.