Flutter Study: Cubit with Stateless Widget
Key points: Cubit, State, stateless widget
In this article, I want to explain the relationship between the stateful and stateless widgets with cubit things and discuss the difference between Cubit and Bloc.
Cubit in stateless widget:
First, I will introduce what a cubit is. We need to change states in the flutter when users interact with our apps, such as changing the index, widgets, or some content. Usually, in some examples, you can see that they will use a stateful widget with a set state function to do those things, like:
So the Cubit is a tool to manage the state and business logic in another file with a state file. such as sample1_cubit.dart and sample1_state.dart. with Cubit and State, it is no need to manage the State in a stateful widget, and we can change it as a stateless widget.
The benefit of stateless widget:
When we use a stateless widget with a cubit, we do not need to know the business logic. Leave the present data with the State.parameter, and the state value will be changed when we execute functions (business logic) in Cubit to change the State. The method is like this:
It is beneficial in the stateless widget screen, and you do not need to consider the business logic and use Bloc Builder to rebuild the widget.
Another benefit is that we do not need to define events in Cubit compared with Bloc. It can save time and make some functions easier to write.
And Cubit is like a simple version of Bloc, but it can support all the functions in Bloc, so I recommend using Cubit unless you need a significant Bloc to manage State.
How to write a Cubit:
Let us see the example:
The Cubit: use the copywith method to change the State in State.dart
The State: define the copywith method with value.
The cubit and state files are in the image.
If we want to write a cubit, we need to write functions (events) and use emit to change the state parameter so that the screen can rebuild and the value can change.
Like the State.dart file, at least in the file, we need to define values we need, then define copywith() function to let event can change the state value.
How to use Cubit with a stateless widget:
In the screen file or stateless widget, each time when the user interacts with the app, we need to call the functions or events in the Cubit to execute functions to make changes. Do it like this: use a method to control the State.
- First, you need to provide the Bloc before calling this screen.
- Use BlocProvider.of<Cubit>(context). event() to execute the event.
- Use BlocBuilder to rebuild the widget you want to change by user interaction.
Change a stateful widget to a stateless widget:
In the last part, I want to introduce how to change a stateful widget to a stateless widget. Because when we use some packages from Pub.dev website, we also find them are stateful widgets with the setState() function, but usually, we need to convert them to stateless widgets so that they can match our rule or guideline.
The way to change it is straightforward. Let's see this example:
If we want to change the setStateFunction, we delete the function, change the widget to a stateless widget
This is the original BottomNavyBar with a stateful widget:
like this:
When I change it to a stateless widget, it looks like this:
Yeah, that’s all that I want to introduce here.
You can visit my code here. If you like it, please star it.
Thank you!