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:
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),
),
);
}
} |