Get TextField Text Input Entered Value on Button click in Flutter

TextField widget in flutter has controller argument which controls the entered edited text. We have to create a TextEditingController() object which controls the controller. In flutter we cannot directly retrieve Text Input value, we have to get this using controller object. We would use StatefulWidget widget in our tutorial in order to get value from Text Input because we want to show the value in Text widget. So in this tutorial we would Get TextField Text Input Entered Value on Button click in Flutter Android iOS app example tutorial.

Contents in this project Get TextField Text Input Entered Value on Button click in Flutter Android iOS Example:

1. Import material.dart package in your app’s main.dart file.

2. Call our main layout class MyApp using void main runApp() function.

3. Create our main class named as MyApp extends with State less widget. As you can see in below code in Body section we have called a GetTextFieldValue() function directly from GetTextFieldValue class.

4. Create class named as GetTextFieldValue extends with StatefulWidget. This would make sure that we would use State in our class. We have called this class in above code. We would define a custom form using this method, This step is necessary.

5. Create a class named as _TextFieldValueState extends with State<GetTextFieldValue> .We would define here a corresponding State class which holds the form data in State.

6. Create a Text Field controller named as textFieldValueHolder and retrieve the current Entered value using TextEditingController() inbuilt method in _TextFieldValueState class. We would also have to define this controller name to Text Field.

7. Create a String variable named as result and set its default value to empty. We would use this string as State in order to update the Text widget on app run time.

8. Create a function named as getTextInputData() in _TextFieldValueState class. We would call this function on button onPress event. In this function we would get the Text Field widget entered value using controllerName.text . Now our result variable will works as State.

9. Create Widget build area in _TextFieldValueState class and define 1 Container view with TextField widget and 1 Button and 1 Text widget.

  • controller: textFieldValueHolder : Text Field controller created above to get entered value.
  • $result : Is used to show the state value on app runtime.

10. Complete source code for main.dart file:

Screenshots:

Get TextField Text Input Entered Value on Button click in Flutter

Leave a Reply

Your email address will not be published.