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.

Practice

1. What is the main purpose of using a Form widget in Flutter when collecting user input?

easy

A. To create animations for buttons

B. To display images inside the app

C. To group multiple input fields and manage their validation together

D. To handle network requests automatically

Solution

1. Step 1: Understand the role of Form widget

   The Form widget groups input fields and helps manage their validation as a single unit.

2. Step 2: Identify the correct purpose

   Other options describe unrelated features like images, animations, or network handling.

3. Final Answer:

   To group multiple input fields and manage their validation together -> Option C

4. Quick Check:

   Form groups inputs for validation = A [OK]

Hint: Form widget groups inputs for validation and submission [OK]

Common Mistakes:

• Thinking Form handles images or animations
• Confusing Form with network handling widgets
• Ignoring validation grouping

2. Which of the following is the correct way to declare a GlobalKey for a form in Flutter?

easy

A. final _formKey = GlobalKey<State>();

B. final _formKey = GlobalKey();

C. final _formKey = GlobalKey<Form>();

D. final _formKey = GlobalKey<FormState>();

Solution

1. Step 1: Recall the correct type for form key

   The form key must be typed as GlobalKey<FormState> to access form validation methods.

2. Step 2: Check each option's type

   final _formKey = GlobalKey<FormState>(); uses GlobalKey<FormState>, which is correct. Others use incorrect or incomplete types.

3. Final Answer:

   final _formKey = GlobalKey<FormState>(); -> Option D

4. Quick Check:

   Form key type = GlobalKey<FormState> [OK]

Hint: Use GlobalKey<FormState> to manage form state [OK]

Common Mistakes:

• Omitting <FormState> generic type
• Using GlobalKey<Form> instead of FormState
• Using untyped GlobalKey

3. Given this Flutter code snippet:

final _formKey = GlobalKey<FormState>();

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

// Later in button onPressed:
if (_formKey.currentState!.validate()) {
  print('Valid input');
} else {
  print('Invalid input');
}

What will be printed if the user submits the form with an empty text field?

medium

A. Invalid input

B. No output

C. Valid input

D. Runtime error

Solution

1. Step 1: Analyze the validator function

   The validator returns 'Enter text' if the input is empty or null, which means validation fails.

2. Step 2: Check the validate() method result

   Since validator returns a non-null string, validate() returns false, triggering the else branch.

3. Final Answer:

   Invalid input -> Option A

4. Quick Check:

   Empty input fails validation = Invalid input [OK]

Hint: Validator returning non-null means invalid input [OK]

Common Mistakes:

• Assuming empty input is valid
• Confusing validator return values
• Expecting no output on validation failure

4. Consider this Flutter code snippet for form submission:

final _formKey = GlobalKey<FormState>();

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

ElevatedButton(
  onPressed: () {
    if (_formKey.currentState.validate()) {
      print('Submitted');
    }
  },
  child: const Text('Submit'),
);

What is the error in this code?

medium

A. currentState can be null, should use currentState! to avoid error

B. validate() should be validate without parentheses

C. Validator function must return a boolean, not a string

D. TextFormField missing controller property

Solution

1. Step 1: Check usage of currentState

   currentState can be null if the form is not mounted, so calling validate() without null check causes error.

2. Step 2: Identify correct null safety usage

   Using _formKey.currentState!.validate() asserts non-null and avoids runtime error.

3. Final Answer:

   currentState can be null, should use currentState! to avoid error -> Option A

4. Quick Check:

   Use currentState! to safely call validate() [OK]

Hint: Use currentState! to avoid null errors on validate() [OK]

Common Mistakes:

• Calling validate() without null check
• Thinking validator returns boolean
• Misusing validate as property

5. You want to submit a form and show a success message only if all fields are valid. Which Flutter code snippet correctly performs this action?

hard

A. if (_formKey.currentState.validate) {
print('Success!');
}

B. if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Success!'))
);
}

C. if (_formKey.validate()) {
showDialog(context: context, builder: (_) => Text('Success!'));
}

D. if (_formKey.currentState!.validate()) {
Navigator.pushNamed(context, '/success');
}

Solution

1. Step 1: Validate form state correctly

   Use _formKey.currentState!.validate() to check all fields are valid.

2. Step 2: Show success feedback

   Use ScaffoldMessenger.of(context).showSnackBar() to display a success message to the user.

3. Step 3: Check other options

   if (_formKey.currentState.validate) { print('Success!'); } misses parentheses and null safety, C uses invalid method, D navigates instead of showing message.

4. Final Answer:

   if (_formKey.currentState!.validate()) { ScaffoldMessenger.of(context).showSnackBar( SnackBar(content: Text('Success!')) ); } -> Option B

5. Quick Check:

   Validate then show SnackBar for success [OK]

Hint: Validate with currentState! then show SnackBar for feedback [OK]

Common Mistakes:

• Calling validate without parentheses or null check
• Using invalid methods on form key
• Showing message without ScaffoldMessenger