← Flutter tutorial

Flutter

Handling User Input

ElevatedButton's onPressed runs a function when tapped. TextField collects typed text, usually paired with a TextEditingController.

Example: reading a text field's value on submit

final controller = TextEditingController();

Widget build(BuildContext context) {
  return Column(
    children: [
      TextField(controller: controller),
      ElevatedButton(
        onPressed: () => print('You typed: ${controller.text}'),
        child: const Text('Submit'),
      ),
    ],
  );
}

Renders a text input above a "Submit" button; tapping Submit prints whatever was typed into the field.

The TextEditingController is what lets your code read back what the user typed — controller.text holds the field's current value at any moment, similar in spirit to reading e.target.value in the JavaScript/React event-handling lessons, just structured as a persistent object here rather than a value passed to an event handler each time.

Example
final controller = TextEditingController();

Widget build(BuildContext context) {
  return Column(
    children: [
      TextField(controller: controller),
      ElevatedButton(
        onPressed: () => print('You typed: ${controller.text}'),
        child: const Text('Submit'),
      ),
    ],
  );
}
Output
Renders a text input above a "Submit" button; tapping Submit prints whatever was typed into the field.