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.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main layout class MyApp using void main runApp() function.
|
1 |
void main() => runApp(MyApp()); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Get Text Field Value') ), body: Center( child: GetTextFieldValue() ) ) ); } } |
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.
|
1 2 3 4 5 |
class GetTextFieldValue extends StatefulWidget { _TextFieldValueState createState() => _TextFieldValueState(); } |
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.
|
1 2 3 4 |
class _TextFieldValueState extends State<GetTextFieldValue> { } |
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.
|
1 |
final textFieldValueHolder = TextEditingController(); |
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.
|
1 |
String result = ''; |
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.
|
1 2 3 4 5 6 |
getTextInputData(){ setState(() { result = textFieldValueHolder.text; }); } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: textFieldValueHolder, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Some Text Here'), ) ), RaisedButton( onPressed: getTextInputData, color: Color(0xffFF1744), textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here To Get Text Field Entered Data'), ), Padding( padding: EdgeInsets.all(8.0), child : Text("Entered Text is = $result", style: TextStyle(fontSize: 20)) ) ], ), )); } |
10. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Get Text Field Value') ), body: Center( child: GetTextFieldValue() ) ) ); } } class GetTextFieldValue extends StatefulWidget { _TextFieldValueState createState() => _TextFieldValueState(); } class _TextFieldValueState extends State<GetTextFieldValue> { final textFieldValueHolder = TextEditingController(); String result = ''; getTextInputData(){ setState(() { result = textFieldValueHolder.text; }); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 280, padding: EdgeInsets.all(10.0), child: TextField( controller: textFieldValueHolder, autocorrect: true, decoration: InputDecoration(hintText: 'Enter Some Text Here'), ) ), RaisedButton( onPressed: getTextInputData, color: Color(0xffFF1744), textColor: Colors.white, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), child: Text('Click Here To Get Text Field Entered Data'), ), Padding( padding: EdgeInsets.all(8.0), child : Text("Entered Text is = $result", style: TextStyle(fontSize: 20)) ) ], ), )); } } |
Screenshots:
