In this recipe, we’ll see how to retrieve the text a user has typed into a textfield.

Directions

  • Create a TextEditingController
  • Supply the TextEditingController to a TextField
  • Display the current value of the text field

1. Create a TextEditingController

In order to retrieve the text a user has typed into a text field, we need tocreate aTextEditingController.We will then supply the TextEditingController to a TextField in the nextsteps.

Once a TextEditingController is supplied to a TextField or TextFormField,we can use it to retrieve the text a user has typed into that text field.

Note: It is also important to dispose of the TextEditingController when weare finished using it. This will ensure we discard any resources used by theobject.

  1. // Define a Custom Form Widget
  2. class MyCustomForm extends StatefulWidget {
  3.   @override
  4.   _MyCustomFormState createState() => _MyCustomFormState();
  5. }
  7. // Define a corresponding State class. This class will hold the data related to
  8. // our Form.
  9. class _MyCustomFormState extends State<MyCustomForm> {
  10.   // Create a text controller. We will use it to retrieve the current value
  11.   // of the TextField!
  12.   final myController = TextEditingController();
  14.   @override
  15.   void dispose() {
  16.     // Clean up the controller when the Widget is disposed
  17.     myController.dispose();
  18.     super.dispose();
  19.   }
  21.   @override
  22.   Widget build(BuildContext context) {
  23.     // We will fill this out in the next step!
  24.   }
  25. }

2. Supply the TextEditingController to a TextField

Now that we have a TextEditingController to work with, we need to wire it upto a specific text field. To do this, we’ll supply the TextEditingControllerto a TextField or TextFormField Widget as the controller property.

  1. TextField(
  2.   controller: myController,
  3. );

3. Display the current value of the text field

After we’ve supplied the TextEditingController to our text field, we can beginreading values! We will use thetextmethod provided by the TextEditingController to retrieve the String of textthe user has typed into the text field.

In this example, we will display an alert dialog with the current value ofthe text field when the user taps on a floating action button.

  1. FloatingActionButton(
  2.   // When the user presses the button, show an alert dialog with the
  3.   // text the user has typed into our text field.
  4.   onPressed: () {
  5.     return showDialog(
  6.       context: context,
  7.       builder: (context) {
  8.         return AlertDialog(
  9.           // Retrieve the text the user has typed in using our
  10.           // TextEditingController
  11.           content: Text(myController.text),
  12.         );
  13.       },
  14.     );
  15.   },
  16.   tooltip: 'Show me the value!',
  17.   child: Icon(Icons.text_fields),
  18. );

Complete example

  1. import 'package:flutter/material.dart';
  3. void main() => runApp(MyApp());
  5. class MyApp extends StatelessWidget {
  6.   @override
  7.   Widget build(BuildContext context) {
  8.     return MaterialApp(
  9.       title: 'Retrieve Text Input',
  10.       home: MyCustomForm(),
  11.     );
  12.   }
  13. }
  15. // Define a Custom Form Widget
  16. class MyCustomForm extends StatefulWidget {
  17.   @override
  18.   _MyCustomFormState createState() => _MyCustomFormState();
  19. }
  21. // Define a corresponding State class. This class will hold the data related to
  22. // our Form.
  23. class _MyCustomFormState extends State<MyCustomForm> {
  24.   // Create a text controller. We will use it to retrieve the current value
  25.   // of the TextField!
  26.   final myController = TextEditingController();
  28.   @override
  29.   void dispose() {
  30.     // Clean up the controller when the Widget is disposed
  31.     myController.dispose();
  32.     super.dispose();
  33.   }
  35.   @override
  36.   Widget build(BuildContext context) {
  37.     return Scaffold(
  38.       appBar: AppBar(
  39.         title: Text('Retrieve Text Input'),
  40.       ),
  41.       body: Padding(
  42.         padding: const EdgeInsets.all(16.0),
  43.         child: TextField(
  44.           controller: myController,
  45.         ),
  46.       ),
  47.       floatingActionButton: FloatingActionButton(
  48.         // When the user presses the button, show an alert dialog with the
  49.         // text the user has typed into our text field.
  50.         onPressed: () {
  51.           return showDialog(
  52.             context: context,
  53.             builder: (context) {
  54.               return AlertDialog(
  55.                 // Retrieve the text the user has typed in using our
  56.                 // TextEditingController
  57.                 content: Text(myController.text),
  58.               );
  59.             },
  60.           );
  61.         },
  62.         tooltip: 'Show me the value!',
  63.         child: Icon(Icons.text_fields),
  64.       ),
  65.     );
  66.   }
  67. }

Retrieve Text Input Demo