Getting Input from Multiple TextFields Easily

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