Form submission in Flutter - Mini App: Build & Ship

Build: Simple Form Screen

A screen with a form that lets users enter their name and email, then submit the form to see a confirmation message.

Target UI

Simple Form Screen

+---------------------------+
| Name: [______________]    |
| Email: [______________]   |
|                           |
|        [Submit]            |
+---------------------------+

Two TextFormFields: one for name, one for email

A Submit button below the fields

Validate that both fields are not empty

On submit, show a SnackBar with message 'Form submitted: [name], [email]'

Use a Form widget with a GlobalKey to manage validation

Starter Code

Flutter

import 'package:flutter/material.dart';

class SimpleFormScreen extends StatefulWidget {
  @override
  State<SimpleFormScreen> createState() => _SimpleFormScreenState();
}

class _SimpleFormScreenState extends State<SimpleFormScreen> {
  final _formKey = GlobalKey<FormState>();
  final _nameController = TextEditingController();
  final _emailController = TextEditingController();

  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    super.dispose();
  }

  void _submitForm() {
    // TODO: Add form validation and submission logic
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Simple Form Screen')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                controller: _nameController,
                decoration: InputDecoration(labelText: 'Name'),
                // TODO: Add validator
              ),
              SizedBox(height: 16),
              TextFormField(
                controller: _emailController,
                decoration: InputDecoration(labelText: 'Email'),
                // TODO: Add validator
              ),
              SizedBox(height: 32),
              ElevatedButton(
                onPressed: _submitForm,
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Task 1

Task 2

Solution

Flutter

import 'package:flutter/material.dart';

class SimpleFormScreen extends StatefulWidget {
  @override
  State<SimpleFormScreen> createState() => _SimpleFormScreenState();
}

class _SimpleFormScreenState extends State<SimpleFormScreen> {
  final _formKey = GlobalKey<FormState>();
  final _nameController = TextEditingController();
  final _emailController = TextEditingController();

  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    super.dispose();
  }

  void _submitForm() {
    if (_formKey.currentState?.validate() ?? false) {
      final name = _nameController.text.trim();
      final email = _emailController.text.trim();
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Form submitted: $name, $email')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Simple Form Screen')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                controller: _nameController,
                decoration: InputDecoration(labelText: 'Name'),
                validator: (value) {
                  if (value == null || value.trim().isEmpty) {
                    return 'Please enter your name';
                  }
                  return null;
                },
              ),
              SizedBox(height: 16),
              TextFormField(
                controller: _emailController,
                decoration: InputDecoration(labelText: 'Email'),
                validator: (value) {
                  if (value == null || value.trim().isEmpty) {
                    return 'Please enter your email';
                  }
                  return null;
                },
              ),
              SizedBox(height: 32),
              ElevatedButton(
                onPressed: _submitForm,
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

This solution uses a Form widget with a GlobalKey to manage the form state and validation.

Each TextFormField has a validator that checks if the input is empty and returns an error message if so.

The _submitForm method calls validate() on the form state. If validation passes, it shows a SnackBar with the entered name and email.

This approach keeps the UI responsive and provides immediate feedback to the user.

Final Result

Completed Screen

Simple Form Screen

+---------------------------+
| Name: [John Doe     ]     |
| Email: [[e-mail]] |
|                           |
|        [Submit]            |
+---------------------------+

User types name and email in the fields

User taps Submit button

If fields are empty, error messages appear below each field

If fields are filled, a SnackBar appears at bottom: 'Form submitted: John Doe, [e-mail]'

Stretch Goal

Add email format validation to the email field

💡 Hint

Use a simple RegExp to check if the email contains '@' and a dot '.' after it