I'm building an app where I ping some data in my screen with the StreamBuilder (time, location, etc.), now I want to make an option for the user to leave the current screen without breaking the state or context of the screen, sort of like minimizing the screen. How can I achieve this in Flutter? Example:
I have my Screen One where I ping the data:
Now I want to make an option to the user to check some other data in the back while the Screen One is still running in the background so it doesn't break the ping of data from the StreamBuilder:
If I use the Navigator.of(context).pop() that will naturally pop the current screen and return to the previous one, so what I'm looking for is a solution not to break the state or context and still be able to return to the screen, like I said, sort of minimizing the screen.
Any idea of solution is quite helpful, thanks in advance!
Related
I have a problem with my Here Maps Navigation. I can start the navigation on my flutter app but every time I open another page on the app and come back to the navigation page, it restarts the navigation. It tries to get the current location again, takes a lot of time to do that, and shows the default "invalid" map page. I want the navigation to save it's current state even if I change the view to another page on my app and come back to navigating. Is there a way to do this? Am I missing something here?
I finally found a way to solve it by saving the state of my Flutter pages. I used the PageView widget for the main.dart's scaffold body and AutomaticKeepAliveClientMixin on the pages I wanted to save the states of. You can check this YouTube video for how to implement this: https://www.youtube.com/watch?v=fGe45NikVqE
I'm new to Flutter and I need help with logic part for my project so if this question doesn't belong in SOF, please let me know.
So I have stacks of cards in one screen and I want to control those cards from another screen but I'm not really sure how to implement and the logic behind it so can somebody help me?.
so the idea is, The user can view stacks of cards in Home Screen but they can't reorder their position, if the user want to do that than he have to go to Reorder Screen.
Basic idea of the app will look like
Home Screen
.......................
Card 1
Card 2
Card 3
//All cards are stack together
Reorder Screen.
.........................
Button 1 (syn to Card 1)
Button 2 (syn to Card 2)
Button 3 (syn to Card 3)
it will appear in this order but the user can move their position
by drag and drop and this will also change the order of the Cards in Home Screen too,
I understand that It'll be very difficult without looking any code but please let me know how you going approach to implement this feature if you were asked to do it.
Any suggestion or help on the logic part will be really appreciated. Thanks
What you are trying to do is called state management. You state is the data which can change. The simplest option is to pass variables from the card screen to the button screen. The button screen would then make changes to this state, and pass it back. You can do this with just stateful widgets and setState. For more complicated state, you will need to use a more advanced system like the bloc pattern or providers.
For this example, you could pass the list to the list to the button screen from the card screen. The button screen modifies this list, then you use setState to apply changes to the screen. Be aware of widget keys when changing the order of items in a list.
I think that what you want is a state management solution. There is a lot of them, with each their pros and cons. I (and the Flutter team) would suggest Provider.
Basically, your Provider would hold the cards data list and a function to reorder it.
Then, both the screens would depend on that data (using a Consumer).
And the reorder screen would call something like context.read<YourProvider>().reorder(oldIndex, newIndex) to reorder the list.
Take a look at this for further details : Simple app state management
If you want to get informed about other SM solutions : List of state management approaches
Pardon me if this is a naive question but I am trying to figure out a way in Flutter to load different data when the user clicks a button. The way I currently see is routing the user to a new screen everytime but I am sure there would be a better approach without loading the whole screen everytime
You should use a Stateful Widget
I would create a Future Builder / ListView Builder. Depending on how you want it to behave you could have the ListView items clear before regenerating the list of items to show.
Future Builder you could create a function to return certain widgets depending on the request you make with the function.
Say I have a Flutter app with two screens - screen A and screen B. Screen A is just a ListView that displays a list of items but needs to perform a network call whenever the list changes and then update the list. Screen B can modify the list of items but I want screen A to only perform the network call when screen A is in the foreground and being displayed. As far as I can tell, I cannot do this easily. Screen A is not disposed and reinitialized when navigating to and from screen B. It would very helpful if StatefulWidget had onForeground and onBackground methods to override, but they do not. This problem is not exclusive to navigation either, but this same problem presents itself when using PageView with full-screen pages. Is there some proper/standard way of implementing this?
My current setup is as follows: I let the parent widget to both screen A and B hold the list in a ValueNotifier and pass it to both screens when constructing them. Then, screen A listens for changes on the ValueNotifier and performs a network call whenever it does. So, in order to determine whether screen A is in the foreground/background, I will have to start/stop listening for changes before/after navigating. But I haven't started implementing this, as I think it will get complicated when widgets far down the widget tree trigger the navigation or other widgets need to know whether they're in the foreground/background.
Another option I've thought of is instead of observing for changes in the list, I could rather just return a result from screen B saying whether or not the list changed and react then. But I can think of many ways this can complicate my code as well since my real app involves more than just one dependency. I would have to create a custom result class for each screen containing a record of all the data that changed then it would be tedious if I want to add more data in the future. And how would I handle navigation to screen B then screen C? The result would have to be retained and passed down so screen A can react to changes made by screen C. I would also have to ensure all calls to Navigator.pop contained the result, and override back button presses to pop with the result. And I'd also have to ensure that the result makes it to the proper widgets that need to react to changes.
Am I just missing something simple to accomplish this? I am not the most experienced with Flutter and I wouldn't be surprised if there's some easy solution I haven't learned yet.
Edit: After some more testing, it appears AnimationController does something similar to what I need with the vsync parameter, in that it does not update when the State is in the background or when it is not being drawn. So, I could use SingleTickerProviderStateMixin on screen A's state, then use createTicker to create a Ticker, and then check if the Ticker.isTicking whenever the list changes. If it is ticking, screen A is in the foreground, otherwise it is in the background. Although I'm not sure if this is a good approach, since it appears Ticker's are really only used for Animations and there's nothing documented for a use case like mine.
I have a page that presents chat messages and has the dates of a group of messages as a divider in my flutter app. The data is pulled from localDB and I am trying to make it refresh the data by polling the DB for updates, however everytime I rebuild the stream or even future it makes the screen flicker and it automatically scrolls to the top of the list. The code is too big for here so I have posted it here.
It uses a Stream builder that calls a widget with data it gets from the first stream and uses another streambuilder to build the messages. I am sure this has something to do with it, but have no idea how to change that or fix the flicker and scroll weirdness.
Hoping someone has some ideas of how to handle this better or fix the flickering.
What you could try is creating a "app state" for each page, for example:
Loading app state - which displays a Progress Indicator when you're polling from DB/server.
Success app state - this dismisses the Progress Indicator and just shows an empty container, displaying your data.
Failed app state - Displays an error icon of your choice.
Perhaps you could try this library, Flutter GetX , and I recommend this library because of how simple it is to use.
It has state management library, which saved me lots of time and code using streams and setState({}).