Input & Forms (TextField)

TextField is used to capture text input from the user. It's useful everywhere — login forms, search boxes, contact forms, comment boxes. Using a TextEditingController lets you read what's typed in the input, and cleaning up the controller in dispose() is good practice to avoid memory leaks.

dart

class NameForm extends StatefulWidget {
  const NameForm({super.key});

  @override
  State<NameForm> createState() => _NameFormState();
}

class _NameFormState extends State<NameForm> {
  final nameController = TextEditingController();
  String greeting = '';

  @override
  void dispose() {
    nameController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: nameController,
          decoration: const InputDecoration(
            labelText: 'Enter your name',
            border: OutlineInputBorder(),
          ),
        ),
        const SizedBox(height: 12),
        ElevatedButton(
          onPressed: () {
            setState(() {
              greeting = 'Hello, ${nameController.text}';
            });
          },
          child: const Text('Submit'),
        ),
        Text(greeting),
      ],
    );
  }
}

You should see

Enter a name and tap Submit, and a greeting like "Hello, name" appears below.

Next Steps

Once input starts changing your state, keep reading about the State Management concept.