I want to make screen like that using flutter. The screen must have 2 tabs .both tab screens load on same main screen Eg. when user click tab one on screen load tab one ( as the photo) and click Tab 2 on screen load tab 2. How I can do that code
You need to use PageView() to show more than one page at the same place.
you need to pass to de PageView() the controller (which is a widget of PageController)
so you can call the pageController.animateToPage() so you can animate and switch between pages...
you can find how to use the PageView here, they explain really well!
hope that helped!
Related
I designed three onboarding pages in figma which contains information about my app, while wireframing the app, I added smart animate to the three pagesThis is the first onboarding page
The second one
The third one
The smart animate enables smooth transition from each page to each page
While using flutter, I created 3 different pages for each onboarding pages and added a navigation widget to each button
But the navigation from each page to each page was stacked
I also tried using gesturedetection() onhorizontalswipe still same result
The pages navigate in a stacked way totally different from figma's smart animate option.
Is there anyway I can do this?
I'll appreciate any help
Thanks in advance.
From what I understood,
You want to build an onboarding screen with some animation. But the pages are being stacked.
It is happening because you are navigating to different pages with each button press. That is very bad practice for building an onboarding screen.
You should be using a PageView widget that allows you to transit between pages without navigating to them.
If you want to use a plugin that suits you, I would recommend introduction_screen
I've looked through many tutorials for the side nav drawer. I can create one that works fine to lead to different pages. However, when I travel to a page that's different from home, it only gives me the arrow icon to go back to home at the top left instead of keeping the button to bring me back to the side navbar. How can I prevent this?
I can't use the home page to navigate everywhere because it's just supposed to be a blank splash screen.
You can define your drawer in a separate widget file, that you can import everywhere you have a scafold.
I created a package for it because I was missing similar functionality. If you want a Flutter approach for this navigation check out: https://api.flutter.dev/flutter/material/NavigationRail-class.html
Or if you want to have a look at my package: https://pub.dev/packages/side_navigation
It's because you're moving to a new page/Scaffold (probably using Navigator.push()). So, the default button in the AppBar will be the back button.
You can either have the same Drawer in every Scaffold you navigate to, which is not recommended since you'll just keep pushing routes to the navigation stack.
Or, you can change pages within the Scaffold. Check the interactive examples in BottomNavigationBar and NavigationRail to get an idea of how to do it. Basically instead of calling Navigator.push() when a tile in Drawer is tapped, just update the selected index and call setState().
I'm building a flutter app with persistent bottom navigation bar that contains a menu button.
The menu is supposed to open a drawer from any screen and trough the back button it should close it.
For that I'm using a scaffold including the bottom navigation widget and also the drawer.
This works fine for all screens that are directly accessible trough the bottom navigation bar.
The problem arises if I navigate (I'm using auto_route for routing) to another sub page.
In the sub page it seems that it is not possible to close the drawer.
In the sub page I dont provide a Scaffold since I would have nested scaffolds.
I'm using the WillPopScope and onPop looks like this:
if (Scaffold.of(context).isEndDrawerOpen) {
Navigator.of(context).pop();
Unfortunately this just pops the sub page while the drawer stays open.
One solution would be to pass a closing function to every child screen (or something like a global key for the global scaffold) but I would appreciate a more elegant solution
Do you have any idea how I can fix that?
Thanks in advance!
In my application I have 13 screens in total, some of them has links to other screens, I also have a drawer that has links to most of these screens.
The following image shows the only navigation flow that I want in the app:
as you can see the only screens that have links to other screens are the home, warehouses and close expiry screens. But because the drawer exists in every screen I now can navigate from warehouses to products then warehouses then products and so on, or from close expiry to warehouses to products to home to close expiry until the end of time.
what I want is this: whenever the user navigates to one of the home screen direct links, the screens stack should only contain the home screen and the navigated to screen with it's descendants.
In other words, I want to make sure the the screens stack has only one instance of any screen in the app. I don't want loops, and I also don't want to get rid of the drawer.
Is there any way to achieve that?
Thanks in advance.
The only way that I've found is to always navigate to the home screen before going to any other screen, this way we can achieve exactly what is asked in the question
This is a Flutter Specific Query.
I Want to achieve the Layout Referenced in the Image above. Two Tabs
Below a Container.
The Tabs can be switched using Swipe Animation like that in a
Page View.
The Tabs Contain Dynamically Generated Widgets from Provider.
The Entire Page along with the Fixed Container must be
Scroll-able.
When Switching between the Tabs the fixed container should stay
in place and only tab Content(Column of Widgets) should swipe
left and right.
What I've Tried :
Using a Parent List View and Nesting the Fixed Container Child
and Using Tab Bar to switch the Widget using Animated Switcher and
Slide Animation. Here the Problem is i cannot swipe left and right
and create the Page View like Effect. I also tried Nesting Page-View
inside List-View but since the Page-View does not have a fixed height
( because the tab contents are dynamically generated ).
A few many more concepts i tried to tackle but the issue every time was
that the tab contents are not having a fixed height.
I really want to achieve this Layout and i want to know if there's any way.