I'm struggling to figure out how to use Riverpod for the following scenario.
I have a file called textformfields.dart with 3 TextFormFields
I have another file called buttons.dart (which is widely used in the whole project) which generates an ElevatedButton
I have another file called submitProject.dart which returns a Scaffold and calls the textformfields.dart and the buttons.dart
My goal is to disable the button, if at least one of the 3 TextFormFields is empty.
I really have no idea how to start, since I'm not really familiar with State Management and Riverpod yet.
Can you give me some tips?
Related
i have a page named displayData . On it there is a button if i click on it it shows DraggableScrollableSheet normally it has a button done when i click on it the icon of the page on the bakground (DisplayData) must change .i used a variable in a setState but it doesn't work it's true on the DraggableScrollableSheet but always false in display data
any help !
for this type of cases, there are several solutions, I recommend the use of providers, in this way with the use of 'extends ChangeNotifier' you will be able to detect the changes made without having to use the setState and you will be able to call from any class (or page ) the variables you need
you can use callback methods from on widget to another, if you have much complicated scenario then I suggest using state management libraries like Provider, RiverPod or Bloc.
also
Could you share your code here
I have a simple chat page with a ChatBloc and a ReplyBox widget, a message box with a send button.
The I would like the ReplyBox to be reusable, so not to have specific knowledge of the ChatBloc. However, I'd like to be able to control the text in the ReplyBox from the bloc. This is proving very difficult because the text field expects to use a TextEditingController.
What I've tried:
Using TextFormField initialValue to pass into the widget the text from the bloc. Doesn't rebuild when the value changes.
Forcing a rebuild using Key. Text is updated but focus is lost.
Making it a stateful widget with a TextEditingController, not taking the text value from the bloc, and just clearing when the button is pressed. This works ok, but it's not flexible. For example, the message would be cleared if there is a sending error, which it shouldn't.
I haven't tried managing the TextEditingController in the bloc. It seems like not the right thing to do.
I see the 3rd method is promising with StatefullWdiget and TextEditingController to solve your problem.
I would have another bloc for the ReplyBox with events like Reset, Update, etc.
In the widget I would connect the state of the ChatBloc to ReplyBloc.
In drawing may be something like this:
I have asked a similar question on the repository of BLoC library. Quoting the answer provided to me by Felix Angelov, the creator itself:
I don't recommend that. The proper way imo is to maintain a TextEditingController and call clear when you want to clear the input.
You can read the answer here plus you can also check the entire question.
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.
In Flutter does avoiding setState() achieve anything?
I have a StatefulWidget (screen) where I use Widgets that handle their own state completely with the exception of the FAB button. The Fab button is disabled or enabled when data has changed in order to allow the update of the DB when data has changed. I posted a question on SO as to how to use Provider to handle that and thus prevent the need to setState(), and implemented that with Provider.
When looking at another screen to implement something similar, I wondered if another solution may be better. This screen also contains Widgets that all handle their own state - TextFields with TextEditControllers, so the only place I was calling setState() was to enable or disable the FAB. I had previously created a Stateful Widget to create a CheckBox with its own state because the standard CheckBox doesn't have state. It's fairly simple and only 50 lines of code. So, I did the same with the FAB, I created a Stateful Widget (CustomFab) that encapsulates a FAB. When it needs to be enabled or disabled, it is called to set its own state, and returns a FAB that is either enabled or disabled with the appropriate color. Because I have other similar screens, I can use that same component with them.
Does it achieve anything by avoiding setState() in this situation (for mobile and Web), and if so, which is the best way to handle that (Custom-Widget or Provider or another)?
setState is merely avoided in Flutter development for two main reasons:
It rebuilds the whole widget, which may hinder performance on consecutive calls if not used correctly.
using setState only as a state management couples the business logic to the UI, which may reduce code re-usability and maintainability.
In simple apps, there are no significant issues in using setState. However, if you need more control over your code, I suggest going for more complex state management patterns.
First of all, I'm a real beginner with Flutter, so I have probably not even grasped the basic design patterns yet. My problem is probably simple for someone who understands flutter. Here goes:
I have a tabbed GUI in my app and a floating action button. Each tab has a list that I want to update using that action button (FAB). The easy way to do this seemed to have one action button for each tab, but I read that you should not do this in flutter. So I made the button "global" and call a method on the current tab when the button is pressed. The method then adds some data that should be shown in the list, but the problem is that the list of course isn't actually updated just because I add data. The setState() is never called inside that list widget.
All the exampels I've found are very simple with the FAB being inside the list having access to its setState() method. But in my case I'm outside the list. How do I solve this? Notifier? Stream? I'm lost...
I think the correct solution is to use a "Stack" and "Positioned" widged like:
- Stack
- Scaffold
- TabBar
- Positioned
- FloatingActionButton