Convert stateless to stateful widget flutter

In a previous blog post, we have discussed simple button click events using flutter and run our application. If you haven’t read it yet then please click here to read. LEARN FLUTTER.

In this blog post, we will discuss

1) How to input data in your textbox using TextField() widget. We will also discuss the argument like keyboard type, decoration, controller.

2) What is different between hint text and LabelText in a flutter.

3) What is State?

4) How Stateful and Stateless widgets work in flutter?

5) How to pass argument in flutter?

So, let’s start design our page, to add textbox in flutter we need to use “TextField()” widget.

Let’s add two values, Here in down below I have to specify all the code and later explain it in depth.

keyboardType:-It will expect text input type. You can select types like DateTime, email address, multiline, number

Decoration:-It will expect input decoration value. Which contain “HintText”. We will discuss the hint text And LabelText down below.

Controller:- If we want to fetch the value of a particular textbox in our variable, we have to create an event like onChange, etc… To perform this type of operation in flutter we have a property named controller. We can assign some controller values to it. So, let’s create some property.

Whatever the value we enter in the textbox. It will automatically bind it to _noOneController. Whenever we want to access that textbox value by using _noOneController we can use it.

The difference between hint text and LabelText, hint text means when you start writing in your textbox the value will be gone while using LabelText it will persist the value which is present in your textbox. It acts like a LABEL.

Now when we run the code and enter the value, and click on the button nothing gets changes. Why?

First, let’s discuss WHAT IS STATE?

The state is data or information in your app use.

Our app doesn’t have STATE. And to design an interactive app we need to update our widget. For that, we need to convert our app from a Stateless to a Stateful widget.

What is a Stateful widget in flutter?

In Stateful Widget, we have the “Build()” method that builds a widget and that renders as UI and here we can also get our input data. Also, we can have some internal state and that’s the core thing here and this widget will get re-draw. So, things get updated by flutter.

How to convert the flutter app into a Stateful widget?

In flutter whenever you want to change the output on your screen or re-draw the screen you have to call the “Build()” method again. And In the build method, we have to inform the fluttering state of my variable gets change so please redraw it on my screen.

In Stateful Widget, we have stated so we can inform flutter like the state of my variable is change, go and redraw it on my screen.

We are going to use the Snippet and create a Stateful widget.

StatefulWidget Class

Select the first option and code with the two-class gets generated

This is the first way to convert your app. In Visual studio code we another way to convert it.

Simply right-click and select Refactor. The choice is yours which option you want to use. The first time it is good practice to do them manually.

Here I have changed the code from

Stateful widget is the combination of two classes. So, why we need two classes?

The widget itself can be recreated when external data change.

The second class which extended the class STATE is, persistent. The state is a generic class. It attaches to the widget, which means it is attached to that element in the user interface that you see but unlike that class, it is technically not recreated. Which is important for storing out state.

Confuse!!! Confuse!!! Confuse!!!

Soon you will get the idea. Let’s continue writing our code.

We have already made a link between both the class by using generic.

But in the stateful class, we need to create the method “create state()”.

The last step which is pending is to use the “setState(() {” method.

Why we specify “setState() ?”

Because using this method we inform to flutter that we are about to change the state. And when the state changes it should re-render this widget.

Here is the output, in which you can see the example of hint text and Label Text. And Added value get’s Display.

How to pass argument in flutter?

 void getUserData(int typesData) {

Our function required a variable that accepts the value and in a function call, we need to write the code something as shown below.

FlatButton(onPressed:()=> getUserData(1), child: Text('Insert Record')),

Leave a Comment