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.

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