Flutter Forms | Flutter Form with Example

In Flutter, the Form widget is commonly used to build and handle user input forms. Forms are essential for capturing user information, enabling interactions, and gathering data. Here are some common scenarios where you might use the “Form” widget in Flutter:

1. User Registration and Login:

   – Creating a signup or login form where users enter their details, such as name, email, and password.

2. Data Entry Forms:

   – Building forms for various data entry scenarios, such as filling out a survey, providing feedback, or entering payment details.

3. Search Forms:

   – Implementing search functionality with a form where users can input search queries.

4. Filtering Data:

   – Creating forms to filter or sort data based on user preferences or criteria.

5. Settings Screens:

   – Building settings screens that allow users to customize app preferences through form-like interfaces.

6. Feedback Forms:

   – Implementing forms for users to submit feedback, bug reports, or contact the support team.

7. Multi-Step Forms:

   – Designing multi-step forms where users progress through different sections or pages to provide information.

8. Payment Forms:

   – Developing forms for users to enter payment details during the checkout process in an e-commerce app.

9. Profile Editing:

   – Allowing users to edit and update their profile information through a form.

10. Survey and Quiz Forms:

    – Building forms for conducting surveys, quizzes, or questionnaires with various types of input fields.

When using the `Form` widget, you can take advantage of Flutter’s form validation features, such as the `TextFormField` widget, which provides built-in validation capabilities. Additionally, the `Form` widget allows you to organize form fields, manage their state, and handle form submission.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SignUpScreen(),
    );
  }
}

class SignUpScreen extends StatefulWidget {
  @override
  _SignUpScreenState createState() => _SignUpScreenState();
}

class _SignUpScreenState extends State<SignUpScreen> {
  final _formKey = GlobalKey<FormState>();
  TextEditingController _nameController = TextEditingController();
  TextEditingController _emailController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sign Up'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              TextFormField(
                controller: _nameController,
                decoration: InputDecoration(labelText: 'Name'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your name';
                  }
                  return null;
                },
              ),
              SizedBox(height: 16),
              TextFormField(
                controller: _emailController,
                decoration: InputDecoration(labelText: 'Email'),
                keyboardType: TextInputType.emailAddress,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your email';
                  }
                  // Additional email validation logic can be added here
                  return null;
                },
              ),
              SizedBox(height: 16),
              TextFormField(
                controller: _passwordController,
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your password';
                  }
                  // Additional password validation logic can be added here
                  return null;
                },
              ),
              SizedBox(height: 32),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState?.validate() ?? false) {
                    // Perform signup logic here
                    print('Name: ${_nameController.text}');
                    print('Email: ${_emailController.text}');
                    print('Password: ${_passwordController.text}');
                  }
                },
                child: Text('Sign Up'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

The SignUpScreen widget is a StatefulWidget that contains the signup form. The Form widget wraps the form fields and handles form validation. TextFormField widgets are used for name, email, and password input fields. The _formKey is used to access the form’s state and trigger validation. The ElevatedButton is used for the signup button, and the onPressed callback is responsible for performing the signup logic.