Day 9: Forms and Input Validation in Flutter | Flutter in 30 Days Guide

Day 9: Working with Forms and Input Validation in Flutter | Flutter in 30 Days

Welcome back to Day 9 of our "Flutter in 30 Days" series! Today, we'll dive into one of the essential concepts for building interactive apps — Forms and Input Validation in Flutter. Forms are a critical part of most apps, whether it's a login screen, a signup form, or any other user input scenario. By the end of this tutorial, you'll have a solid understanding of how to create forms and validate user input in Flutter.

What We'll Cover Today:

• Introduction to Forms in Flutter
• Creating a Simple Form
• FormField Widgets
• Validating User Input
• Handling Form Submissions

1. Introduction to Forms in Flutter

Forms are used to collect user inputs in Flutter. They consist of various FormField widgets like TextFormField, Checkbox, Dropdown, etc. The Form widget acts as a container for grouping and validating multiple form fields.

2. Creating a Simple Form

To get started, let's create a simple form with a text field where users can enter their name.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: FormExample(),
  ));
}

class FormExample extends StatefulWidget {
  @override
  _FormExampleState createState() => _FormExampleState();
}

class _FormExampleState extends State {
  final _formKey = GlobalKey();
  String _name = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Simple Form Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: 'Enter your name'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your name';
                  }
                  return null;
                },
                onSaved: (value) {
                  _name = value ?? '';
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState?.validate() ?? false) {
                    _formKey.currentState?.save();
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('Hello, $_name!')),
                    );
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
        

3. FormField Widgets

Flutter provides several built-in FormField widgets like TextFormField, DropdownButtonFormField, and CheckboxFormField. These widgets have built-in support for validation and state management, making it easy to handle form data.

4. Validating User Input

Validation is essential to ensure that the user has entered the correct data before submitting a form. In the example above, we use the validator property to check if the name field is empty. If it is, an error message will be displayed.

5. Handling Form Submissions

To handle form submissions, we check if the form is valid using validate() and then save the input data using save(). The SnackBar widget is used to provide feedback to the user upon successful submission.

Wrapping Up

That's all for today's session on Forms and Input Validation in Flutter. Understanding how to work with forms and validate input is crucial for building robust Flutter applications. In the next session, we'll dive into Day 10: Exploring Flutter Animations to make your apps more interactive and engaging.

Stay tuned, and don't forget to practice what you've learned today!

Missed the previous days? Check out all the topics covered so far in our Flutter in 30 Days series.

Happy Coding! 😊