How to implement this time picker UI in Flutter? - 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.

Related

How to validate TextFormFields, that are at different pages inside a PageView

So lets say I have 3 Pages : [StartingPage, NamePage, AdressPage] inside a PageView.
Each of those children has a TextFormField inside it.
When I am at StartingPage I want to call .validate() on the keys of the TextFormFields on NamePage and AdressPage and I want the errorLabels to show, when the user navigates to the other pages. The problem is that currently, the validation only works for the TextFormFields that are on screen.
So basically there are two questions:
Is it possible to pre-build pages of a pageview? Otherwise when I call formFieldKey.currentState the state is null if I haven't navigated to the respective page.
Is there another way to validate offscreen TextFormField content and show the errorlabel, when they come into view?
Unfortunately Flutter Dosen't Support Multi-Page Forms So You Need To Implement Advanced State Management To Make This Happen.
I Used Riverpod To Create a 4 Page Form By Creating A Form Key For Every Page And Saving The State of the Forms, This Way Every Form Will keep Its State Until You Dispose Of it, Hope This Helped.

How to add a view counter in flutter

I'd like you to guide me on how I can detect if a user has seen an item so implement a view counter
as on the image below
Is there any widget I need to use to get this result? What searches do I need to do to get this result?

Flutter. How to animate reordered ListView?

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

How to check visibility of a Flutter widget even when covered by another

I'm trying to find a way to check the visibility of a Flutter widget when it's either off screen or when it's obscured by another, for example Drawer, Dialog or BottomSheet.
visibility_detector helps with checking whether it's on the screen or not but does not work with the second use case (known limitation).
Is there a lower lever api that I can use to check whether a widget is actually visible to the user?
My use case: I'm adding a widget to the Overlay when something external happens (similar to Tooltip but not on long press). If the user opens for example the Drawer, the widget will appear on top. I want to detect that the child is not visible and delay or cancel the action.
Do I understand your problem?
You have a widget you want to always be on top?
You want the user to interact with that widget first before doing other things?
Use design patterns to make coding easier, your users will thank you.
You can show a Dialog on-top of other widgets with the showGeneralDialog or showDialog functions. Because Dialogs are a design-pattern used in many apps, users will already know how to use them.
Define app behavior with explicit state.
It is too hard to derive app behavior from rendered UI, not all devices are the same size and shape. This means you should try to write a variable that describes your situation and then write the code you need to make that variable's value correct. It sounds like you want a variable like bool overlayIsShowing.

How to load data on a screen on the press of a button without routing and rebuilding whole screen

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.