1. Flutter
  2. User Forms
  3. Building Forms

Building Forms in Flutter: A Beginner's Guide

Forms are essential in many Flutter applications for collecting user input. Whether you're creating a registration screen, a login page, or any feature that requires user data, Flutter's robust form widgets make it easy to design and manage forms. This guide will walk you through everything you need to know to start building forms in Flutter.

What is a Form in Flutter?

A Form in Flutter is a container for grouping multiple form fields (e.g., TextFormField, DropdownButtonFormField) and managing their validation. It's like a wrapper that helps coordinate the input fields and simplifies the validation process.

Key Widgets for Building Forms

1. Form Widget

  • The Form widget is the root container for your form.

  • It manages the state of the form and facilitates validation.

    Form(
  key: _formKey,
  child: Column(
    children: [
      TextFormField(),
      ElevatedButton(onPressed: _submitForm, child: Text("Submit")),
    ],
  ),
);

Key Properties:

  • key: Links the form with a GlobalKey<FormState> to manage its state.
  • child: Typically a Column or other layout widget containing form fields.

2. TextFormField

  • Used for text input and includes built-in validation.

    TextFormField(
  decoration: InputDecoration(labelText: 'Email'),
  keyboardType: TextInputType.emailAddress,
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter your email';
    }
    if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
      return 'Enter a valid email address';
    }
    return null;
  },
);
  • Key Properties:
  • decoration: Adds labels, hints, and icons.
  • keyboardType: Specifies the type of keyboard (e.g., TextInputType.emailAddress).
  • validator: Function for field validation.

3. DropdownButtonFormField

  • Displays a dropdown menu for selecting options.

    DropdownButtonFormField<String>(
  decoration: InputDecoration(labelText: 'Select your country'),
  items: ['USA', 'Canada', 'India']
      .map((country) => DropdownMenuItem(
            value: country,
            child: Text(country),
          ))
      .toList(),
  onChanged: (value) {
    print('Selected: $value');
  },
);
  • Key Properties:
  • items: List of options displayed in the dropdown.
  • onChanged: Callback when a new value is selected.

4. CheckboxListTile

  • Combines a checkbox and a label for user selection.

    CheckboxListTile(
  title: Text("I agree to the terms and conditions"),
  value: _isChecked,
  onChanged: (value) {
    setState(() {
      _isChecked = value!;
    });
  },
);
  • Key Properties:
  • value: The current state of the checkbox (checked/unchecked).
  • onChanged: Callback triggered when the state changes.

How to Validate Forms

  • Flutter simplifies form validation using the FormState class and GlobalKey. Here's how you can implement validation:

Steps to Validate:

  1. Assign a GlobalKey<FormState> to the Form.
  2. Use the validator property in fields like TextFormField.

  3. Call formKey.currentState!.validate() to check all fields.

    final _formKey = GlobalKey<FormState>();

void _submitForm() {
  if (_formKey.currentState!.validate()) {
    print("Form is valid!");
  } else {
    print("Form is invalid!");
  }
}

Example: Simple Registration Form

Here’s a complete example of a registration form with validation:

import 'package:flutter/material.dart';

class RegistrationForm extends StatefulWidget {
  @override
  _RegistrationFormState createState() => _RegistrationFormState();
}

class _RegistrationFormState extends State<RegistrationForm> {
  final _formKey = GlobalKey<FormState>();
  String _email = '';
  String _password = '';
  bool _acceptTerms = false;

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      print('Email: $_email');
      print('Password: $_password');
      print('Accepted Terms: $_acceptTerms');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Registration Form')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: 'Email'),
                keyboardType: TextInputType.emailAddress,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your email';
                  }
                  if (!RegExp(r'^[^@]+@[^@]+\.[^@]+').hasMatch(value)) {
                    return 'Enter a valid email address';
                  }
                  return null;
                },
                onSaved: (value) {
                  _email = value!;
                },
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your password';
                  }
                  if (value.length < 6) {
                    return 'Password must be at least 6 characters long';
                  }
                  return null;
                },
                onSaved: (value) {
                  _password = value!;
                },
              ),
              CheckboxListTile(
                title: Text('I accept the terms and conditions'),
                value: _acceptTerms,
                onChanged: (value) {
                  setState(() {
                    _acceptTerms = value!;
                  });
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submitForm,
                child: Text('Register'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Tips for Building Forms

  1. Keep Forms Simple: Avoid overwhelming users with too many fields.
  2. Use Validation Wisely: Ensure fields have clear error messages.
  3. Add Field Focus Control: Use FocusNode to move between fields programmatically.
  4. Test Responsiveness: Ensure forms work well on different screen sizes.

With these fundamentals, you’re ready to start creating forms in Flutter. Experiment with different widgets and validation logic to tailor forms to your app’s needs!

 

Previous
Next