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?
Related
I'm building a web app with Flutter, and I was wondering what the best options are for displaying a modal data entry form that does not need to take the whole screen space.
Initially, I was looking at pushing another Scaffold based screen, but that takes up the whole screen space.
Any suggestions?
My humble solution is to wrap your Scaffold's body's Widgets in a Stack.
You can choose whether or not to display the form using if (someState) ... inside the children list.
The form itself can be wrapped in a Card that is wrapped in a Center Widget.
There might be better solutions but that's what I use.
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.
I have a stateful Scaffold widget, where the body contains a list of entities with various properties (e.g. shoes or cars) and Drawer widget, which is empty at first, except for two buttons at the bottom ("Cancel" and "Filter") and a FAB. The user can add various filters with the FAB (e.g. the user can add a shoesize-filter, or a color-filter).
The problem I have is the following: Let's say the user selects various filters and works with them (i.e. ticks checkboxes, enters a shoesize, changes sliders, etc.). When the user is ready to apply the filters, he can click the "Filter" button, which closes the Drawer (onTap -> callback -> Navigator.of(context).pop()). But when the user wants to go back, reopen the Drawer, and adjust one of the filters, it obviously doesn't work, since the widget is being rebuilt from scratch.
Currently, the way the filtering works is, once the "Filter" Button is pressed, all the various values from the added filters are collected into an object FilterPackage, which is then passed via callback to the Scaffold widget, which then applies the values from the FilterPackage to the list of entities.
One solution I came up with, would be feeding this FilterPackage object to the Drawer widget in its constructor, which would provide all the information necessary to rebuild the widget just how it has to be.
Is that a reasonable solution? I have already made some research, but struggled finding a solution on what would clearly be the best and recommended way to preserve the drawer's state. Using PageStorage / PageStorageBucket seems overly complicated for this case. Or am I wrong?
Thanks in advance for any guidance.
Basic setup:
I have a ListView builder that generates a list based on a List.
Each element of the list is wrapped with a Hero() widget and had a unique tag.
List renders just fine, GestureDetector initiates a 'Details' page on tap, with same widget wrapped in Hero() widget with same tag, and animates just fine, as does the 'return' animation on Navigator.pop();
The problem is...
I allow the user to delete the list element on the details page, if they do this, when I close the page with .pop(), the Hero animation basically animates a blank box of the original size back over the top of the newly rendered (and shorter list) making it look like there are 'blanks' in the list.
I originally thought it was an issue with the state of the list and the list not updating, but lots of checking proves the list is being updated, and the widgets are being re-rendered exactly as they should, it's just that there's a blank box sitting on top of them because of the Hero animation caused by the deletion.
Remove the Hero() widget wrapper and it works fine.
Break the 'tag' so it no longer matches between the two pages and it's fine (but obviously doesn't animate when navigating to the Details page).
Obviously I can stop deletion and move to the main page to avoid the animation at all or remove the animation, but is there a 'correct' way yo do this?
Anyone else hitting the same?
What a quite interesting case you got there. Is your details page statefull? One thing i imagine you could do is to setState after the deletion, so in the rebuild the deleted hero widget wouldn't exists anymore, and when poping navigation the hero navigation won't be fired because it doesn't exist anymore.
What if instead of deleting the item from the list on the pop-up up page, when the user clicks delete on the pop-up page you send a flag/parameter back to the parent page to delete the record. That way the animation will play fine as the pop-up closes, and then you can animate out the deleted record.
Using GWT 2.0 I have an entry point that adds two Widgets to a LayoutPanel which in turn is added to the RootLayoutPanel. The Widgets both handle click events and have click events registered to them. The problem is that only the last widget added to the LayoutPanel can actually be clicked. Switch the order in which the widgets are added switches the widget that works. Add mroe widgets and still the only you can click is the last one added to the LayoutPanel.
Any idea why this is? Is there any reasoning behind the behaviour, or have I missunderstood what is happening under the covers? How do I gat all widgets in the LayoutPanel to accept events? Should I be using another panel class?
I'm not too bothered if the LayoutPanel prevents anything below it from being clicked, but want all Widgets added to it to be clickable.
Stupid Boy! (said in the voice of Captain Mainwaring)
There is no problem having two Widgets on a LayoutPanel accepting clicks. But if you adjust the Widgets' size by manipulating their elements' styles directly then the containing element created by the LayoutPanel will still cover the whole screen. In effect the last Widget added always covered everything else.
GWT school: D- Must try harder. Easily distracted...