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 <=.