I'am trying to understand how to use provider and where to place the provider widget.
Therefore I build an app from a tutorial using provider. Here you can see the widget tree according to the tutorial. The provider widget is wrapped around the MaterialApp widget and the arrows show, which widget uses which other widget.
As far as I understand, in general, the provider widget is supposed to be placed as far down the widget tree as possible and only as far up as neccessary. As neither MaterialApp, NavigationBase, Scaffold nor IndexedStack need information from the providers, I thought I could move those down the tree. But this doesn't work: When I wrap MultiProvider around Scaffold (or any other widget below MaterialApp as far as I tried it) I get an exception.
Error: Could not find the correct Provider<StudentsProvider> above this StudentsListScreen Widget
Apparently - although having read a lot on provider - I haven't fully understood how provider interacts. What did I miss?
The provider must be located at the very top of the tree above the MaterialApp widget and declared once. Then in this case the provider's data will be available from any widget within the tree.
...
return MultiProvider(
providers: [...],
child: MaterialApp(
...someAppSettings,
home: HomeWidget()
)
Everything inside the MaterialApp widget (even when moving between different routes) will have access to the data from the provider.
I use this structure in my application and it works great.
Related
by coincidence, I looked at the Scaffold widget implementation source code, then I noticed that it's a StateFulWidget
why it's a StatefullWidget?
what parts or things need it to be StatefullWidget?
Scaffold widget has a feature called drawer, which has a state for itself, so when you need to open it, Scaffold changes its state and open it. Other feature like showing snackBars, BottomSheet and FloatingActionButton do the same.
How does Flutter rebuild/repaint work in case of:
Creating a Stateless widget inside a Stateful widget.
Creating a Stateful widget inside a Stateless widget.
Does a Stateless widget inside a Stateful widget render each time the Stateful widget State changes?
Can a Stateful widget change inside a Stateless widget? How does it affect the Stateless widget?
First here is the difference between stateless and stateful from the flutter documentation
A stateless widget never changes. Icon, IconButton, and Text are examples of stateless widgets. Stateless widgets subclass StatelessWidget.
A stateful widget is dynamic: for example, it can change its
appearance in response to events triggered by user interactions or
when it receives data.
For the first scenario "Creating a Stateless widget inside a Stateful widget."
when we update the state of the Stateful widget it will re-run its build function, when a stateless widget is part of that build function, flutter will check if its input data has changed or not, if not it will return the same instance of the widget, if it's changed then it will create another instance from the stateless widget and discard the previous one.
here is an illustration of the above scenario from this article
For the second scenario "Creating a Stateful widget inside a Stateless widget."
let's try to illustrate the widget tree first to visualize what's going on.
Stateless (1)
/ \
/ \
(2) Stateful Stateless (3)
if we update the state of the stateful widget (2), both (1) and (3) won't get affected, but our build function in the stateful widget will be called again.
and if the input coming for the parent (1) changes, then (1) and (2) will be rebuilt again and flutter will check if (3) has input data changes it will be also rebuilt, if not it will return the same instance.
hope this answers your question and makes you better understand how flutter renders its UI
Note: this is my current understanding of the way flutter handles rebuilding stateful and stateless widgets, feel free to correct me if anything is not correct.
I have struggled to access data from a Provider in a Dialog widget. But i got a general ERROR from Provider.
After I took a look at the widget tree I saw that the Dialog widget was the child of Material widget not the child of the widget from I am showing it.
So the error is wright: I don't have any Provider above my SilverList Widget.
My question is: Can I make somehow the Dialog widget to be the child of my widget, where (ofcourse) the provided information is accessible?
EDIT 1:
I am already passing the context of the widget parent to the showDialog() builder method:
The problem was that I didn't understand well how the widget tree build the drawer. A drawer is build as a new screen so it will be at the same level with the screen where I pushed from the drawer.
The provider can be seen just down in widget tree, and not at the same level.
So the solution was to move Provider widget in the main.dart right after MaterialApp.
So I am reading through Bloc for state management for flutter.
Since Bloc allows you to sink and stream (rebuilding a widget based on the input), then is it possible to build an app mostly with stateless widgets?
As an example, let say I make lots of single stateless class widgets, thus almost everything is compartmentalized into its own stateless widget.
With the Bloc state management, I could simply rebuild a certain stateless child widget to reflect the change.
In this approach, I don't see the need of using the stateful widget. Of course, being a total beginner in flutter, I wanted to hear if this approach has any merit to it.
Is this a good approach? Any info will be much appreciated.
You're right that you can use only StatelessWidgets. You just need to be cognizant of where you create your bloc. Some ways of instantiation are more easily testable than others, like passing the bloc to your StatelessWidget as an argument.
But for implementation, I like the flutter_bloc library the best:
https://pub.dev/packages/flutter_bloc
It includes BlocProvider which automatically handles creation and disposal of blocs.
One other thing to note is that you'll often have to kick off an event in a bloc to perform some action and a StatefulWidget could be useful to run that in the initState method.
You could either say in a StatefulWidget:
initState(){
_myBloc = SomeBloc()..add(SomeEvent());
}
// Then somewhere in your widget tree
BlocProvider<MyBloc>(
create: (context) => _myBloc,
builder: (context, state) {},
)
OR, in your StatelessWidget:
BlocProvider<MyBloc>(
create: (context) => MyBloc()..add(SomeEvent()),
builder: (context, state) {},
)
You'll find what works best for you, but I've found with Flutter that it mostly depends on the situation and goal of a particular feature. There's no need to pin yourself into a habit of always needing to use a StatelessWidget, but you are right that it is possible.
You can use only Stateless Widget. But there is one problem that you should close streams before the app is disposed of. It can be handled in two ways:
First, you can use a Stateful widget and close streams of bloc in the dispose method of stateful.
Using BlocProvider. In this case, Bloc Provider is a Stateful widget only. It closes streams automatically. Then you can use bloc using BlocProvider in Stateless Widget.
But it doesn't mean that we don't need stateful widgets. Stateful widgets are important in animation for example. Animation, text input or any local changes in the widget itself shouldn't be handled in bloc or other state management. it is the duty of widget itself.
In the Flutter docs they say that a Widget is a mutable configuration (description) for an Element, which I have no problem understanding.
But then we have the stateless widget, which extends the Widget class, and must implement a build method. The two classes look like they do the same job, can any one explain the difference ?
Thanks.
Widget is just an interface. You're never gonna use it directly, and this class does absolutely nothing.
It exists just for the compiler to know that your program is type-safe.
every thing with flutter made with widgets there is no widget only it is Stateless widgets and statefull widgets
and the stateless is static and the other is dynamic
stateless for fixed layouts if you need any dynamic programming like(validation, requests, listeners for buttons and others..)
you need to use Statefull widgets
for more information see here..
difference between stateless and statefull widgets