Form submission in Flutter - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What happens when this Flutter form is submitted?

Consider this Flutter code snippet for a form with a submit button. What will be the output behavior when the user taps the submit button without entering any text?

Flutter

final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        validator: (value) {
          if (value == null || value.isEmpty) {
            return 'Please enter some text';
          }
          return null;
        },
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            print('Form submitted');
          }
        },
        child: Text('Submit'),
      ),
    ],
  ),
)

A The form shows a validation error message below the text field and does not print anything.

B The form prints 'Form submitted' to the console even if the text field is empty.

C The app crashes with a null pointer exception because the form key is not initialized.

D The submit button is disabled and cannot be tapped.

💡 Hint

Think about what the validator function does when the input is empty.

The validator checks if the text field is empty and returns an error string if so. The form's validate() method returns false, so the print statement is not executed and the error message appears below the field.

🧠 Conceptual

intermediate

What is the role of GlobalKey in Flutter forms?

Why do we use a GlobalKey when creating a form in Flutter?

A It disables the form fields until the key is set.

B It styles the form fields with a global theme.

C It automatically submits the form when the user presses enter.

D It uniquely identifies the form widget and allows us to access its state for validation and saving.

💡 Hint

Think about how you call validate() on the form state.

GlobalKey lets us access the form's current state anywhere in the widget tree, so we can call methods like validate() or save() on the form.

📝 Syntax

advanced

Which option correctly saves form data on submission?

Given a Flutter form with a TextFormField, which code snippet correctly saves the input value to a variable when the form is submitted?

Flutter

String? _name;
final _formKey = GlobalKey<FormState>();

Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(
        onSaved: (value) => _name = value,
        validator: (value) => value == null || value.isEmpty ? 'Enter name' : null,
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            // What goes here?
          }
        },
        child: Text('Submit'),
      ),
    ],
  ),
)

A _formKey.currentState!.save(); print('Name saved: $_name');

B _formKey.currentState!.validate(); print('Name saved: $_name');

C _formKey.currentState!.reset(); print('Name saved: $_name');

D _formKey.currentState!.dispose(); print('Name saved: $_name');

💡 Hint

Which method triggers onSaved callbacks?

Calling save() on the form state triggers all onSaved callbacks, storing the input values. validate() only checks inputs, reset() clears them, dispose() frees resources.

❓ lifecycle

advanced

What happens if you call setState inside onSaved during form submission?

In a Flutter form, if you call setState() inside the onSaved callback of a TextFormField, what is the expected behavior?

Flutter

String? _email;

TextFormField(
  onSaved: (value) {
    setState(() {
      _email = value;
    });
  },
  validator: (value) => value == null || value.isEmpty ? 'Enter email' : null,
),

A The app freezes because setState is called during build.

B The UI updates immediately with the new _email value after form submission.

C The setState call is ignored and the UI does not update.

D Calling setState inside onSaved causes a runtime error.

💡 Hint

setState schedules a rebuild after the current frame.

Calling setState inside onSaved is valid and causes the widget to rebuild with updated state after form submission.

🔧 Debug

expert

Why does this Flutter form not show validation errors?

This Flutter form does not show any validation error messages even when the input is empty. What is the cause?

Flutter

final _formKey = GlobalKey<FormState>();

Form(
  child: Column(
    children: [
      TextFormField(
        validator: (value) => value == null || value.isEmpty ? 'Required' : null,
      ),
      ElevatedButton(
        onPressed: () {
          if (_formKey.currentState!.validate()) {
            print('Valid');
          }
        },
        child: Text('Submit'),
      ),
    ],
  ),
)

A The validator function is incorrect and always returns null.

B The TextFormField is missing a controller, so validation is skipped.

C The Form widget is missing the key property, so validate() cannot find the form state.

D The ElevatedButton onPressed callback is not called because the button is disabled.

💡 Hint

Check how the form key is used.

Without assigning the GlobalKey to the Form's key property, calling validate() on _formKey.currentState causes a null error or does nothing, so no validation messages appear.