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

Practice

1. Why do input widgets like TextField capture user data in a Flutter app?

easy

A. To prevent the user from typing anything

B. To display random text on the screen

C. To let the app know what the user types and respond accordingly

D. To change the app's background color automatically

Solution

1. Step 1: Understand the purpose of input widgets

   Input widgets like TextField allow users to type text into the app.

2. Step 2: Recognize why capturing input matters

   Capturing user input lets the app use that data to update UI or perform actions.

3. Final Answer:

   To let the app know what the user types and respond accordingly -> Option C

4. Quick Check:

   Input widgets capture user data = To let the app know what the user types and respond accordingly [OK]

Hint: Input widgets capture what users type for app use [OK]

Common Mistakes:

• Thinking input widgets only display text
• Believing input widgets block typing
• Assuming input widgets change colors automatically

2. Which Flutter code snippet correctly captures user input from a TextField?

easy

A. TextField(onSubmit: (text) { print(text); })

B. TextField(onTap: (text) { print(text); })

C. TextField(onPressed: (text) { print(text); })

D. TextField(onChanged: (text) { print(text); })

Solution

1. Step 1: Identify the correct event for text input

   The onChanged callback triggers whenever the user types or changes text.

2. Step 2: Check the other options

   onTap triggers on tap, onPressed is not valid for TextField, onSubmit is not a valid property.

3. Final Answer:

   TextField(onChanged: (text) { print(text); }) -> Option D

4. Quick Check:

   onChanged captures input = TextField(onChanged: (text) { print(text); }) [OK]

Hint: Use onChanged to capture text input changes [OK]

Common Mistakes:

• Using onTap instead of onChanged
• Trying onPressed which is for buttons
• Confusing onSubmit with onChanged

3. What will be displayed on screen after this Flutter code runs and the user types "Hi"?

String userInput = '';

TextField(
  onChanged: (text) {
    userInput = text;
  },
),

Text('You typed: $userInput')

medium

A. You typed: Hi

B. You typed:

C. You typed: null

D. You typed: userInput

Solution

1. Step 1: Understand variable update in Flutter widgets

   The variable userInput is updated inside onChanged, but the widget does not rebuild automatically.

2. Step 2: Recognize that UI won't update without setState

   Since setState is not called, the Text widget still shows the initial empty string.

3. Final Answer:

   You typed: -> Option B

4. Quick Check:

   Without setState, UI won't update = You typed: [OK]

Hint: State must update UI after input changes [OK]

Common Mistakes:

• Assuming UI updates automatically without setState
• Thinking variable changes refresh UI instantly
• Confusing variable value with displayed text

4. Identify the error in this Flutter code that tries to show user input live:

String input = '';

TextField(
  onChanged: (text) {
    input = text;
  },
),

Text('Input: $input')

medium

A. Missing call to setState to update UI

B. TextField should use onSubmit instead of onChanged

C. Variable input should be final

D. Text widget cannot display variables

Solution

1. Step 1: Check how state updates UI in Flutter

   Changing a variable alone does not refresh the UI; setState must be called.

2. Step 2: Verify other options

   onSubmit is not required here, input should not be final to change, and Text can display variables.

3. Final Answer:

   Missing call to setState to update UI -> Option A

4. Quick Check:

   State update needs setState = Missing call to setState to update UI [OK]

Hint: Use setState to refresh UI after input changes [OK]

Common Mistakes:

• Forgetting setState call after variable change
• Using onSubmit instead of onChanged incorrectly
• Declaring input as final and trying to change it

5. How can you modify this Flutter snippet to show live user input below the TextField?

String input = '';

TextField(
  onChanged: (text) {
    input = text;
  },
),

Text('Typed: $input')

hard

A. Wrap in StatefulWidget and call setState inside onChanged

B. Change input to final and use onSubmit callback

C. Use a StatelessWidget and update input variable directly

D. Remove onChanged and use a button to update input

Solution

1. Step 1: Recognize need for state management

   To update UI live, the widget must be stateful and call setState when input changes.

2. Step 2: Check other options for correctness

   Making input final prevents changes, StatelessWidget can't update UI dynamically, and removing onChanged loses live updates.

3. Final Answer:

   Wrap in StatefulWidget and call setState inside onChanged -> Option A

4. Quick Check:

   StatefulWidget + setState for live input = Wrap in StatefulWidget and call setState inside onChanged [OK]

Hint: Use StatefulWidget and setState for live input display [OK]

Common Mistakes:

• Using StatelessWidget for dynamic input display
• Making input variable final and unchangeable
• Removing onChanged callback loses live updates