Why input widgets capture user data in Flutter - Build It to Prove It

Build: User Input Capture Screen

This screen shows how input widgets capture user data and display it.

Target UI

-------------------------
| Enter your name:      |
| [______________]      |
|                       |
| Your name is:         |
|                       |
| [Submit Button]       |
-------------------------

Add a TextField for user to enter their name

Add a Submit button below the TextField

When Submit is pressed, display the entered name below

Use a StatefulWidget to store and update the input data

Starter Code

Flutter

import 'package:flutter/material.dart';

class UserInputCaptureScreen extends StatefulWidget {
  @override
  State<UserInputCaptureScreen> createState() => _UserInputCaptureScreenState();
}

class _UserInputCaptureScreenState extends State<UserInputCaptureScreen> {
  // TODO: Add a TextEditingController to capture input
  // TODO: Add a String variable to store submitted name

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Input Capture')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Enter your name:'),
            // TODO: Add TextField here
            SizedBox(height: 20),
            // TODO: Add Submit button here
            SizedBox(height: 20),
            Text('Your name is:'),
            // TODO: Show submitted name here
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Task 4

Task 5

Solution

Flutter

import 'package:flutter/material.dart';

class UserInputCaptureScreen extends StatefulWidget {
  @override
  State<UserInputCaptureScreen> createState() => _UserInputCaptureScreenState();
}

class _UserInputCaptureScreenState extends State<UserInputCaptureScreen> {
  final TextEditingController _controller = TextEditingController();
  String _submittedName = '';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('User Input Capture')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Enter your name:'),
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'Type your name here',
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  _submittedName = _controller.text;
                });
              },
              child: Text('Submit'),
            ),
            SizedBox(height: 20),
            Text('Your name is:'),
            Text(
              _submittedName,
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
            ),
          ],
        ),
      ),
    );
  }
}

This screen uses a TextField widget to let the user type their name. The TextEditingController captures what the user types. When the user taps the Submit button, the app reads the current text from the controller and saves it in a variable _submittedName. Then it updates the screen to show the entered name below. This shows how input widgets capture user data and how the app can use that data to update the UI.

We use a StatefulWidget because the screen changes when the user submits their name. The setState() call tells Flutter to redraw the screen with the new data.

Final Result

Completed Screen

-------------------------
| Enter your name:      |
| [John Doe______]      |
|                       |
| [Submit Button]       |
|                       |
| Your name is:         |
| John Doe              |
-------------------------

User types their name in the TextField

User taps the Submit button

The entered name appears below the label 'Your name is:'

Stretch Goal

Add a Clear button to reset the input and submitted name

💡 Hint

Add another ElevatedButton labeled 'Clear' that clears the TextEditingController and resets the submitted name variable inside setState