Show Global SnackBar regardless of page - flutter

I am trying to show a SnackBar that appears regardless of where in the app I am. I did set up and GlobalKey on my root Scaffold, and I am able to call it to show a snackbar from anywhere in my code BUT since I am inside other Scaffolds, it does not show on these pages. The only way to view it is to pop the routes and go back to the main screen, where the root Scaffold is.
Is there any way I could show a SnackBar that's above every single widget?
This I am trying to do to be able to show a message for notifications received when the app is in foreground

Related

How do you create a side navigation drawer that persists across pages?

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().

Using bottom navigation with individual Navigators but single AppBar

I am trying to create an app that has the following basic setup for navigation:
tab1 -> subpage
tab2
tab3
with a bottom navigation bar for switching between the tabs and each tab having its own navigation stack. Furthermore I would like to add an AppBar with a drawer (as endDrawer) and the back button as leading widget in the AppBar.
The AppBar should be centrally managed so I put it in the main page of the app for maintenance purposes instead of having it on every page that is pushed. The drawer should also be updated later on when the user is logging in or out so it encouraged me more to place the AppBar only in the main page.
Now the issue is that I would like to update the AppBar to contain the back button when the app navigated to the subpage of tab1. Since the AppBar is in the parent I thought of RouteObservers as a possible solution by registering a RouteObserver on each NavigationState.
Yet I cannot get it to work because when I would like to subscribe on the RouteObserver in the HomePage in the didChangeDependencies() the currentState of the NavigatorState does not exist. Also I tried subscribing in the build method after the Scaffold with a flag for subscribing only once, but this didn't work either.
I created a github project with the basics of my current implementation:
https://github.com/S-Braeutigam/bottom-navbar-single-appbar
To get to the current state of code I used the following links:
https://codewithandrea.com/articles/multiple-navigators-bottom-navigation-bar/
https://api.flutter.dev/flutter/widgets/RouteObserver-class.html
Flutter 2.0 appbar back button disappeared if contains endDrawer (The solution gets close to what I would like to implement, but the AppBar should always be visible, not only on the sub page)
My main questions are:
Are RouteObservers the correct approach on how to track the navigation to subpages of tabs and display the back button based on it?
At what lifecycle hook in the main page should or could the subscription on the currentState of each NavigatorState be done? Wasn't able to find any where they are not null.

How to determine if a Widget is Stateful or Stateless in Flutter?

I understand the basics here. If my data is going to change it should be stateful so I can update it otherwise stateless.
My question is more oriented in a bottomnavigation scenario. So, I have 3 tabs in my bottomnavigator (Profile, Home, Settings). The entry point is Home which is a stateful Widget.
The other two Widgets I want to basically populate the information in them with the api data.
The Problem
If I am in the Home screen and I click in the Profile icon in the bottomnavigator it does not load the information from the api. Even if it does, If I click in the Home screen and click again in the Profile screen to go back, the information does not refresh.
Solution
So what would be the way to handle this? I expect that if I click in each of the bottomnavigation items the information is refreshed with the api data. Is this because the Widgets are Stateful or Stateless or I am missing something else?
By default, the pages in Bottom Navigation bar refreshes/rebuild when they are are tapped on.
Make sure a few things in your app-
You are not using a "indexed stack" or any similar widget for these pages. These widgets preserves the state of your page
The navigation is taking place on its own. You have not defined any Navigator.Push etc for tap's in navigation bar.
You should call the API inside the initState method of that particular page. Like if you need profile details, call the api for profile information inside the initState method of Profile Tab and not the "Scaffold" page which has the navigation bar.

Flutter show confirmation pop up before exiting from app

I want to take confirmation from user before leaving the app, ideally when clicked on default system back navigation button and at time my navigation stack is empty.
Suppose I am on my homepage after login, and when I try to go back instead of returning me to login page it should show a pop up dialog. And based on the selection either close the app or leave it open.
wrap your home screen widget with WillPopScope widget and inside onWillPop callback write show your dialog and take action based on user's choice

Flutter SnackBar leaves an invisible padding in the Scaffold

I am showing a log in button in a page. Once the user has logged in, the SnackBar will display "Logged In with Google" for example. While the SnackBar is still showing, the body of the Scaffold is being build to a new page, the one accessible by logged in users. However, building the page while the Snackbar is still showing somehow leaves a padding in the Scaffold, in the area used by the SnackBar, so the underlying Scaffold body is still visible, yet you cannot interact with it. If there is a button at the bottom of that body, the button is not tapped because the invisible padding left behind by the (already closed) SnackBar blocks the content underneath.
What am I missing? Is there another way to produce the desired result?
I wrapped the Scaffold with a ScaffoldMessenger in every page and now seems to work. I will elaborate on the answer later on.