Convert stateless to stateful widget flutter

In previous blog post we have discussed about simple button click event using flutter and run our application. If you haven’t read 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 about the argument like keyboardType, decoration, controller.

2) What is different between hintText and LabelText in flutter.

3) What is State?

4) How Stateful and Stateless widget 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 value, Here in down below I have specify all the code and later explain it in depth.

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

Decoration:-It will expect input decoration value. Which contain “HintText” We will discuss the hintText 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 value to it. So, let’s create some property.

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

The different between hintText and LabelText in flutter, hintText 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 change. Why?

First let’s discuss WHAT IS STATE?

State is data or information in your app use.

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

What is Stateful widget?

In Stateful Widget, we have “Build ()” method that build 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 flutter app into Stateful widget?

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

In Stateful Widget, we have state 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 Stateful widget.

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. Choice is yours which option you want to use. At the first time it is good practice to do the manually.

Here I have changed the code from

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

Widget itself can be recreated when external data change.

The second class which extended the class STATE is, persistent. State is generic class. It attaches to the widget, means it attached to that element in the user interface which 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 method “createState()”.

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 state change it should re-render this widget.

Here is the output, in which you can see the example of hintText and LabelText. And Added value get’s Display.

How to pass argument in flutter?

void getUserData(int typesData) {

Our function required variable which accept the value and in function call we need to write the code something as shown below.

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

Leave a Comment