Form widget and GlobalKey in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a GlobalKey for the Form widget.

Flutter

final [1] = GlobalKey<FormState>();

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

AformGlobalKey

BmyForm

CkeyForm

DformKey

Attempts:

3 left

💡 Hint

Common Mistakes

Using a variable name that does not clearly indicate it is a key.

Forgetting to declare the variable as final.

The variable name 'formKey' is commonly used to hold the GlobalKey for a Form widget.

2fill in blank

medium

Complete the code to assign the GlobalKey to the Form widget.

Flutter

Form(key: [1], child: Column(children: []))

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

AformKey

BGlobalKey

Ckey

DformState

Attempts:

3 left

💡 Hint

Common Mistakes

Using the class name 'GlobalKey' instead of the variable.

Using an undefined variable.

The Form widget's key property should be assigned the GlobalKey variable, here 'formKey'.

3fill in blank

hard

Fix the error in the code to validate the form using the GlobalKey.

Flutter

if ([1].currentState?.validate() ?? false) {
  // proceed
}

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

AformKey.currentState

BformKey

CformKey.validate

DformKey.currentState.validate()

Attempts:

3 left

💡 Hint

Common Mistakes

Calling validate() directly on the GlobalKey variable.

Not using the null-aware operator.

You call 'validate()' on 'currentState' of the GlobalKey. Using 'formKey.currentState?.validate()' is correct.

4fill in blank

hard

Fill both blanks to create a TextFormField with a validator that checks if the input is empty.

Flutter

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

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

A==

B!=

Clength

Dtrim

Attempts:

3 left

💡 Hint

Common Mistakes

Using '!=' instead of '==' to check for null.

Checking value.length instead of value.trim().length or isEmpty.

The validator checks if value is null or if trimmed value is empty. So 'value == null' and 'value.trim().isEmpty' are correct.

5fill in blank

hard

Fill all three blanks to save the form state after validation.

Flutter

if (formKey.currentState?.[1]() ?? false) {
  formKey.currentState?.[2]();
  // Use form data here
  setState(() {
    [3] = true;
  });
}

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

Avalidate

Bsave

CisSubmitted

Dsubmitted

Attempts:

3 left

💡 Hint

Common Mistakes

Calling save() before validate().

Using incorrect variable names for the submission flag.

First validate() checks the form, then save() saves the form state. 'submitted' is a boolean flag to track submission.