Why input widgets capture user data in Flutter

Introduction

Input widgets let users type or select information. This data helps apps know what the user wants or needs.

When you want users to enter their name or email to sign up.

When users need to type a message or comment.

When users select options like dates or preferences.

When you want to collect feedback or survey answers.

When users fill out forms to buy something or book a service.

Syntax

Flutter

TextField(
  onChanged: (value) {
    // Use the input value here
  },
  decoration: InputDecoration(
    labelText: 'Enter text',
  ),
)

The TextField widget is the basic input widget in Flutter.

The onChanged callback captures what the user types.

Examples

This example prints the typed text to the console as the user types.

Flutter

TextField(
  onChanged: (text) {
    print('User typed: $text');
  },
)

This example shows a text field with a label and a hint to guide the user.

Flutter

TextField(
  decoration: InputDecoration(
    labelText: 'Email',
    hintText: '[e-mail]',
  ),
)

This example hides the input text, useful for passwords.

Flutter

TextField(
  obscureText: true,
  decoration: InputDecoration(
    labelText: 'Password',
  ),
)

Sample App

This app shows a text field where the user can type. Below it, the app shows what the user typed in real time.

Flutter

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Input Example')),
        body: InputExample(),
      ),
    );
  }
}

class InputExample extends StatefulWidget {
  @override
  State<InputExample> createState() => _InputExampleState();
}

class _InputExampleState extends State<InputExample> {
  String userInput = '';

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(16),
      child: Column(
        children: [
          TextField(
            decoration: InputDecoration(labelText: 'Type something'),
            onChanged: (text) {
              setState(() {
                userInput = text;
              });
            },
          ),
          SizedBox(height: 20),
          Text('You typed: $userInput'),
        ],
      ),
    );
  }
}

Important Notes

Input widgets are interactive and need to update the app state to show user data.

Use setState() in StatefulWidgets to refresh UI when input changes.

Always provide labels and hints for better user experience and accessibility.

Summary

Input widgets let users enter data that apps can use.

Use TextField with onChanged to capture input.

Show user input on screen by updating the app state.