Getting input from multiple TextField
widgets is a common task in app development, especially when building forms, registration pages, or data input features. In this article, you’ll learn how to gather and manage data from several text fields efficiently using Flutter, one of the most popular mobile frameworks.

We’ll walk through:
- Creating multiple
TextEditingController
- Assigning controllers to
TextField
- Retrieving values on a button press
- Handling validation and UI updates
This guide is particularly useful for developers creating login, signup, or survey forms.
Full Example Code (Flutter)
main.dart
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); }
my_app.dart
import 'package:flutter/material.dart'; import 'my_form_page.dart'; class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Multiple TextFields Input', home: MyFormPage(), ); } }
my_form_page.dart
import 'package:flutter/material.dart'; class MyFormPage extends StatefulWidget { @override _MyFormPageState createState() => _MyFormPageState(); } class _MyFormPageState extends State<MyFormPage> { final TextEditingController nameController = TextEditingController(); final TextEditingController emailController = TextEditingController(); final TextEditingController phoneController = TextEditingController(); String result = ''; void _submitData() { setState(() { result = 'Name: ${nameController.text}\n' 'Email: ${emailController.text}\n' 'Phone: ${phoneController.text}'; }); } @override void dispose() { nameController.dispose(); emailController.dispose(); phoneController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('Input from Multiple Fields')), body: Padding( padding: const EdgeInsets.all(16.0), child: Column( children: [ TextField( controller: nameController, decoration: InputDecoration(labelText: 'Name'), ), TextField( controller: emailController, decoration: InputDecoration(labelText: 'Email'), ), TextField( controller: phoneController, decoration: InputDecoration(labelText: 'Phone Number'), keyboardType: TextInputType.phone, ), SizedBox(height: 20), ElevatedButton( onPressed: _submitData, child: Text('Submit'), ), SizedBox(height: 20), Text(result), ], ), ), ); } }
This code uses three TextEditingController
objects to manage input from name, email, and phone fields. When the user presses the submit button, the app gathers the values and displays them.
For more on form validation, see the official Flutter guide on forms: Flutter Forms – Official Documentation