Form submission in Flutter - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a form with a submit button.

Flutter

ElevatedButton(onPressed: [1], child: Text('Submit'))

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

Anull

Bprint('Submit')

CsetState

DsubmitForm

Attempts:

3 left

💡 Hint

Common Mistakes

Using null disables the button.

Using setState alone does not submit the form.

The onPressed property needs a function to handle the form submission, here named submitForm.

2fill in blank

medium

Complete the code to validate the form when submitting.

Flutter

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

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

Avalidate

Breset

Csave

Ddispose

Attempts:

3 left

💡 Hint

Common Mistakes

Using save() does not validate inputs.

reset() clears the form fields.

Calling validate() checks all form fields and returns true if all are valid.

3fill in blank

hard

Fix the error in the form field validator function.

Flutter

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

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

Alength

BisEmpty

CisNotEmpty

Dtrim

Attempts:

3 left

💡 Hint

Common Mistakes

Using length without comparison causes errors.

Using isNotEmpty reverses the logic.

The validator checks if the value is null or empty using isEmpty property.

4fill in blank

hard

Fill both blanks to save the form state after validation.

Flutter

if (_formKey.currentState?.validate() ?? false) {
  _formKey.currentState?.[1]();
  // further actions
}

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

Asave

Bvalidate

Cdispose

Dreset

Attempts:

3 left

💡 Hint

Common Mistakes

Calling reset clears the form instead of saving.

Calling dispose frees resources but does not save.

After validation, calling save() stores the form field values.

5fill in blank

hard

Fill all three blanks to define a TextFormField with a controller and validator.

Flutter

TextFormField(
  controller: [1],
  decoration: InputDecoration(labelText: '[2]'),
  validator: (value) {
    if (value == null || value.[3]) {
      return 'Required field';
    }
    return null;
  },
)

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

A_nameController

BName

Ctrim

DisEmpty

Attempts:

3 left

💡 Hint

Common Mistakes

Using trim instead of isEmpty in validator condition.

Forgetting to assign a controller.

The controller manages input, labelText shows the field name, and isEmpty checks if input is empty.