In the State class, let's add a member called _numberFrom. As shown in the following code, this is a value that will change based on user input:

double _numberFrom;

Then, in the body of the build() method, let's delete the text widget, and add TextField instead:

body: Center(
    child: TextField(),
),

As you can see, there's now  TextField in the center of your app, and you can write into it by clicking over the line and typing something:

Right now, TextField does nothing, so the first thing we need to do is read the value that the user inputs into it.

While there are different ways to read from TextField, for this project, we'll respond to each change in the content of TextField through the onChanged method, and then we'll update the State.

In order to update the State, you need to call the setState() method.

Inside the setState() method, you change the class members that you need to update (in our case, _numberFrom):

child: TextField(
   onChanged: (text) {
     var rv = double.tryParse(text); 
     if (rv != null) { 
       setState(() { 
          _numberFrom = rv; 
       }); 
     } 
  },
),

In the preceding code, each time the value of TextField changes (onChanged), we check whether the value that was typed is a number (tryParse). If it's a number, we change the value of the _numberForm member: in this way, we have actually updated the State. In other words, when you call the setState() method to update a class member, you are also updating the State of the class.

We are not giving any feedback to the user, so unless we use the debugging tools of our editor, we cannot actually check whether this update actually happened. In order to solve that, let's add a Text widget that will show the content of the TextEdit widget, and then wrap the two widgets into a Column widget:

        body: Center(
          child: Column(
            children: [
              TextField(
                onChanged: (text) {
                  var rv = double.tryParse(text); 
                  if (rv != null) { 
                    setState(() { 
                      _numberFrom = rv; 
                    }); 
                  } 
                },
              ),Text((_numberFrom == null) ? '' : _numberFrom.toString())
            ],
          ),
        ),

Before trying the app, let's add another method to the MyAppState class:

  @override
 void initState() {
 _numberFrom = 0;
 super.initState();
 }

The initState() method is called once for each State object when the State is built. This is where you generally put the initial values that you might need when you build your classes. In this case, we are setting the _numberFrom initial value. Also note, that you should always call super.initState() at the end of the initState() method. 

Now, if you write a number in the TextField, you'll see the same number in the Text widget, as well. In this apparently simple example, many things are happening at once:

• You are setting an initial State of the app through the _numberForm class member in the InitState() method.
• The widget is drawn on screen.
• You are responding to a TextField event: the onChanged event, which is called every time the content of the TextField changes.
• You are changing the State by calling the setState() method, and there you change the value of _numberForm.
• The widget is redrawn with the new State, which contains the number that you write in TextField, so the Text widget, which reads _numberForm, contains the modified value of the State.

Here is a diagram that highlights the steps described previously: with a few variations, you'll notice a similar pattern whenever you use stateful widgets in your apps: 

To sum it up, calling setState(), does the following: 

• Notifies the framework that the internal state of this object has changed
• Calls the build() method and redraws its children with the updated State object

Now you have the ability to create an app that responds to the user input and changes the UI based on a changing State, which in Flutter is the most basic way to create interactive apps.

Next, we need to complete the UI of our app, and in order to do that, we need another widget: DropDownButton. Let's create this in the following section.