06
Jan

Retrieve the value of a text field

,
0

Retrieve the value of a text field :

the Previous example, we have discussed entering the input text to the text field and validating that text field if it is empty. Now in this example, we are going to discuss how to retrieve the entered input value/text.

Follow the Below steps to retrieve  entered input as output/ result  in the  flutter App:

 

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

 

Create a TextEditingController:

 

To retrieve the user entered input text as a result / out put  , we  have to create a TextEditingController  and  then supply the TextEditingController to a TextField .

After supplying the  TextEditingController  to a TextField or TextFormField, we can retrieve the user entered data as  a out put/result.

Please Note: It is also important to dispose of the TextEditingController after getting the user entered input as output/result. in below code you will see disposing it by using dispose()

 

// Define a Custom Form Widget
class MyCustomForm extends StatefulWidget {
@override
_MyCustomFormState createState() => _MyCustomFormState();
}

// Define a corresponding State class. This class will hold the data related to
// our Form.
class _MyCustomFormState extends State {
// Create a text controller. We will use it to retrieve the current value
// of the TextField!
final myController = TextEditingController();

@override
void dispose() {
// Clean up the controller when the Widget is disposed
myController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
// We will fill this out in the next step!
}
}

Supplying the TextEditingController to a TextField:

 We have created a TextEditingController now  we need to supply the TextEditingController to a TextField or TextFormField Widget as the controller property. In below code we are doing the same.

TextField(
controller: myController,
);

Displaying  the current value of the text field:

In above we have supplied the TextEditingController to our text field, Now we have to retrieve the user entered input values. to do this we will use the text method provided by the TextEditingController to retrieve the user entered input text .

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

FloatingActionButton(
// When the user presses the button, show an alert dialog with the
// text the user has typed into our text field.
onPressed: () {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
// Retrieve the text the user has typed in using our
// TextEditingController
content: Text(myController.text),
);
},
);
},
tooltip: 'Show me the value!',
child: Icon(Icons.text_fields),
);

Below is the complete example to Retrieve the value of a text field entered by the user in Flutter App:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Retrieve Text Input',
home: MyCustomForm(),
);
}
}

// Define a Custom Form Widget
class MyCustomForm extends StatefulWidget {
@override
_MyCustomFormState createState() => _MyCustomFormState();
}

// Define a corresponding State class. This class will hold the data related to
// our Form.
class _MyCustomFormState extends State {
// Create a text controller. We will use it to retrieve the current value
// of the TextField!
final myController = TextEditingController();

@override
void dispose() {
// Clean up the controller when the Widget is disposed
myController.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Retrieve Text Input'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: TextField(
controller: myController,
),
),
floatingActionButton: FloatingActionButton(
// When the user presses the button, show an alert dialog with the
// text the user has typed into our text field.
onPressed: () {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
// Retrieve the text the user has typed in using our
// TextEditingController
content: Text(myController.text),
);
},
);
},
tooltip: 'Show me the value!',
child: Icon(Icons.text_fields),
),
);
}
}

Congratulations  You Have Learned To Retrieve the value of a text field entered by the user in Flutter App….!!!

If it is Useful Share it with Your Friends….!!!

If You Have Any Query Make A Comment….!!!

Leave a Reply

Categories