TextFormField in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic TextFormField widget.

Flutter

TextFormField(
  decoration: InputDecoration(
    labelText: [1],
  ),
)

Drag options to blanks, or click blank then click option'

AhintText

B"Enter your name"

Ccontroller

DkeyboardType

Attempts:

3 left

💡 Hint

Common Mistakes

Using property names like hintText instead of a string value.

Leaving the labelText empty or missing quotes.

The labelText property sets the label shown above the input field. It needs a string value like "Enter your name".

2fill in blank

medium

Complete the code to set the keyboard type for email input.

Flutter

TextFormField(
  keyboardType: [1],
)

Drag options to blanks, or click blank then click option'

ATextInputType.phone

BTextInputType.number

CTextInputType.text

DTextInputType.emailAddress

Attempts:

3 left

💡 Hint

Common Mistakes

Using TextInputType.text which shows a normal keyboard.

Using number or phone keyboard types for email input.

To show the email keyboard, use TextInputType.emailAddress.

3fill in blank

hard

Fix the error in the validator function to check if input is empty.

Flutter

TextFormField(
  validator: (value) {
    if (value == null || value.[1]) {
      return 'Please enter some text';
    }
    return null;
  },
)

Drag options to blanks, or click blank then click option'

Alength

BisNotEmpty

CisEmpty

Dcontains

Attempts:

3 left

💡 Hint

Common Mistakes

Using isNotEmpty which is the opposite check.

Using length without comparison.

The isEmpty property checks if the string is empty. We want to return an error if it is empty.

4fill in blank

hard

Fill both blanks to create a TextFormField with a controller and obscure text for passwords.

Flutter

final TextEditingController _controller = TextEditingController();

TextFormField(
  controller: [1],
  obscureText: [2],
)

Drag options to blanks, or click blank then click option'

A_controller

Btrue

Cfalse

Dcontroller

Attempts:

3 left

💡 Hint

Common Mistakes

Using the string 'controller' instead of the variable.

Setting obscureText to false which shows the text.

The controller property needs the variable _controller. To hide password input, obscureText should be true.

5fill in blank

hard

Fill all three blanks to create a TextFormField with label, max length, and a validator that checks length > 5.

Flutter

TextFormField(
  decoration: InputDecoration(labelText: [1]),
  maxLength: [2],
  validator: (value) {
    if (value != null && value.length [3] 5) {
      return 'Enter at least 6 characters';
    }
    return null;
  },
)

Drag options to blanks, or click blank then click option'

A"Username"

B10

C<=

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using > instead of <= in the validator.

Setting maxLength too low or as a string.

Forgetting quotes around label text.

The label text is "Username". The maxLength limits input to 10 characters. The validator checks if length is less than or equal to 5 using <=.

Practice

1. What is the main purpose of a TextFormField widget in Flutter?

easy

A. To let users type and edit text input

B. To display images in the app

C. To create buttons for user interaction

D. To navigate between screens

Solution

1. Step 1: Understand the widget's role

   TextFormField is designed to accept text input from users.

2. Step 2: Compare with other widget functions

   Other widgets like Image or ElevatedButton serve different purposes, not text input.

3. Final Answer:

   To let users type and edit text input -> Option A

4. Quick Check:

   Text input = TextFormField [OK]

Hint: TextFormField is for typing text only [OK]

Common Mistakes:

• Confusing TextFormField with buttons or images
• Thinking it handles navigation
• Assuming it only displays static text

2. Which of the following is the correct way to add a label inside a TextFormField?

easy

A. TextFormField(labelText: 'Name')

B. TextFormField(hint: 'Name')

C. TextFormField(decoration: InputDecoration(labelText: 'Name'))

D. TextFormField(text: 'Name')

Solution

1. Step 1: Recall how decoration works

   Labels and hints are added inside the decoration property using InputDecoration.

2. Step 2: Check each option's syntax

   Only TextFormField(decoration: InputDecoration(labelText: 'Name')) correctly uses decoration: InputDecoration(labelText: 'Name').

3. Final Answer:

   TextFormField(decoration: InputDecoration(labelText: 'Name')) -> Option C

4. Quick Check:

   Label goes inside decoration [OK]

Hint: Use decoration with InputDecoration for labels [OK]

Common Mistakes:

• Putting labelText directly on TextFormField
• Using hint instead of labelText for labels
• Confusing text property with label

3. What will happen when the following Flutter code runs and the user submits an empty form?

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: TextFormField(
    validator: (value) {
      if (value == null || value.isEmpty) {
        return 'Please enter text';
      }
      return null;
    },
  ),
)

medium

A. The form submits successfully without errors

B. The app crashes due to missing onSaved callback

C. The TextFormField clears automatically

D. The validator returns 'Please enter text' and shows an error

Solution

1. Step 1: Understand validator behavior

   The validator checks if the input is empty and returns an error message if true.

2. Step 2: Analyze empty input case

   If the user submits empty text, the validator returns 'Please enter text', showing an error below the field.

3. Final Answer:

   The validator returns 'Please enter text' and shows an error -> Option D

4. Quick Check:

   Empty input triggers validator error [OK]

Hint: Empty input triggers validator error message [OK]

Common Mistakes:

• Assuming form submits without validation
• Thinking missing onSaved causes crash
• Believing TextFormField clears on submit

4. Identify the error in this Flutter code snippet using TextFormField:

TextFormField(
  validator: (value) {
    if (value.isEmpty) {
      return 'Required';
    }
    return null;
  },
)

medium

A. Validator should return a boolean, not a string

B. Missing null check for value before calling isEmpty

C. TextFormField requires an onChanged callback

D. Validator cannot be used without a Form widget

Solution

1. Step 1: Check validator parameter type

   The validator receives a nullable String? value, so it can be null.

2. Step 2: Identify missing null check

   The code calls value.isEmpty without checking if value is null, causing a runtime error.

3. Final Answer:

   Missing null check for value before calling isEmpty -> Option B

4. Quick Check:

   Always check for null before isEmpty [OK]

Hint: Check for null before using isEmpty on value [OK]

Common Mistakes:

• Ignoring nullable value in validator
• Expecting validator to return boolean
• Thinking onChanged is mandatory

5. You want to create a form with a TextFormField that only accepts numbers and shows a hint 'Enter age'. Which code snippet correctly implements this?

hard

A. TextFormField(
keyboardType: TextInputType.number,
decoration: InputDecoration(hintText: 'Enter age'),
validator: (value) {
if (value == null || value.isEmpty) return 'Age required';
if (int.tryParse(value) == null) return 'Enter a valid number';
return null;
},
)

B. TextFormField(
keyboardType: TextInputType.text,
decoration: InputDecoration(labelText: 'Enter age'),
validator: (value) => null,
)

C. TextFormField(
decoration: InputDecoration(hintText: 'Enter age'),
validator: (value) {
if (value!.isEmpty) return 'Age required';
return null;
},
)

D. TextFormField(
keyboardType: TextInputType.number,
decoration: InputDecoration(hintText: 'Age'),
validator: (value) {
if (value == null) return 'Age required';
return null;
},
)

Solution

1. Step 1: Identify required properties for numeric input with hint

   The correct implementation requires keyboardType: TextInputType.number, decoration: InputDecoration(hintText: 'Enter age'), and a validator checking for null/empty and valid integer parse.

2. Step 2: Verify validator handles all cases

   Validator must return error for null, empty, or non-numeric input using if (value == null || value.isEmpty) and int.tryParse(value) == null.

3. Final Answer:

   TextFormField( keyboardType: TextInputType.number, decoration: InputDecoration(hintText: 'Enter age'), validator: (value) { if (value == null || value.isEmpty) return 'Age required'; if (int.tryParse(value) == null) return 'Enter a valid number'; return null; }, ) -> Option A

4. Quick Check:

   number keyboard + exact hint + null/empty/parse validator [OK]

Hint: Use keyboardType.number and validate parsing for numbers [OK]

Common Mistakes:

• Using text keyboard for numeric input
• Not validating numeric format
• Confusing hintText and labelText