Retrieve the Value of the TextField in Flutter
Last Updated :
28 Apr, 2025
The text field is widely used in Android Applications for taking user input, using TextEditingController we can retrieve the data from the text field.
A sample video gives you an idea of what we are going to do in this article.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Creating the TextEditingController
Using TextEditingController we can retrieve the data from the text fields.
// Create a text controller and use it to retrieve the current value
of the TextField.
final myController = TextEditingController();
TextField has a property controller, that allows assigning a TextEditingController, which means passing the TextEditingController to the controller of the TextField that we created in the previous step.
TextField(
controller: myController, //myController is the TextEditingController
),Code Example:
Dart
import 'package:flutter/material.dart';
void main() => runApp(const RunMyApp());
class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Retrieve Text Input',
theme: ThemeData(primarySwatch: Colors.green),
debugShowCheckedModeBanner: false,
home: MyCustomForm(),
);
}
}
// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});
@override
State<MyCustomForm> createState() => _MyCustomFormState();
}
// Define a corresponding State class. This class holds the data related to the Form.
class _MyCustomFormState extends State<MyCustomForm> {
// Create a text controller and 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: const 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 containing
// the text that the user has entered into the text field.
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
// Retrieve the text that user has entered by using the
// TextEditingController.
content: Text(myController.text),
);
},
);
},
tooltip: 'Show me the value!',
child: const Icon(Icons.text_fields),
),
);
}
}
Output:
Similar Reads
Retrieve Data From TextFields in Flutter In this article, we'll learn how to retrieve data from TextFields. TextField() widget is the most common widget used in flutter apps to take user input. We'll talk about two major methods used to extract text from TextField.Using VariablesThe TextField widget has various callback properties through
4 min read
Multiline TextField in Flutter Multiline TextField is the input TextField which takes the input in more than one line, This type of TextField is used in the scenario like taking Feedback from the user, User Comments, and Description, etc., We can achieve multiline TextField by setting the property keyBoardType and maxLines of the
2 min read
Flutter - Value Notifier If you are a flutter developer then you must have heard about the state management. You have knowledge of that. If you are new to this topic then we will learn a little bit more about it. You can refer to Flutter – State Management. Do you know other than setState there is more state management you
3 min read
How to Hide the Keyboard When User Tap Out of the TextField in Flutter? Flutter is a UI toolkit developed by Google. It is being utilized by big tech companies like Alibaba, Airbnb, and Google itself to build apps that serve billions of users around the globe. This article will show how to make Rounded Buttons in Flutter. A sample video is given below to get an idea abo
2 min read
Flutter - Restrict TextField to Input Special Characters In Flutter, user input validation is essential for maintaining data integrity and ensuring a smooth user experience. One common requirement is to restrict the input of special characters in a TextField to prevent unwanted characters in certain fields, such as usernames or any other text-based input.
3 min read