Flutter. How to animate reordered ListView? - flutter

Is it possible to animate the change of the order of a ListView like ReorderableListView, but without User interaction.
Means for example, after a few seconds of time the order of the ListView changes.
So I have two Lists with the same items but in another order.
ListOne and ListTwo.
I already saw AnimatedList, But there I can just do delete or add animation.
I need something like move animation.
Somehow like ReorderableListView, but without the user interaction.
Or is it maybe possible to replace the user interaction programmatically in ReorderableListView?
Thanks in advance

Related

How to implement this time picker UI in Flutter?

I am been trying to implement this time picker UI. I used SingleChildScrollView() to implement the scrolling but I am not getting it how to retrieve the data which user selects.
I used NotificationListener() but it is only notifying me where user is starting and ending the scrolling.
I want to retrieve the value where user stops. How to do that ? Click link to view UI.
enter image description here
I think you should try ListWheelScrollView class which has more appropriate design for this case and provides a callback onSelectedItemChanged. So you can retrieve desired value from it.
This widget works like a ListView with focused sections and also have some nice features for customization.

how to make changes from another screen in flutter

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

Scrolling resets widgets flutter

I have an app with a bunch of text views inside a form. When the form scrolls, I lose the text entered in the above text fields. I would like to preserve those values. I tried adding a controller and assigning the value to a variable inside the state class but it does not work.
P.S not just widgets, but almost every type of input for example drop down buttons, radio buttons and what not.
I had a bunch of small forms inside a list view. Turns out, scrolling far enough, destroys the forms not visible to the user destroying their state. I need to lift their state up to the parent widget. For more information on how to do that, check how to keep the state of my widgets after scrolling?

Determining if widget is in the foreground/background

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.

How to animate the removal of a PageView.Builder item dynamically

Is it possible to animate the removal of an item in a horizontal PageView.Builder in flutter?
I know there's the AnimatedList but I have been trying to do it on a PageView.Builder as I need a PageView.Builder for my use-case.
I want to make it so once a user presses on an Item from the PageView the item gets removed with an animation. Not Dismissable, but on press.
I would really love if you could point me out to the correct documentation or example.
Unfortunately there is still not a proper way to do this. You can try combining SlideTransition with animateToPage method of the PageController. But it will not be ideal. It would be optimal if there was a AnimatedListView kind of version for the PageView. Or at least a good way to mimic it.