What is the new Form System for Flutter?

• General

The new form system is one of the most straightforward form systems available for free for building complex Flutter form with only a few lines of code. So, in this article, we will see what is the new Form System for Flutter.

What is the new Form System for Flutter?

Flutter is a cross-platform framework that allows you to develop beautiful applications. However, if you’ve already used Flutter to create your form, you may find it a bit too much. Too many text editing controllers and focus nodes are needed to create a complete experience.

Here’s a good example to clarify: If you type in a field instead of clicking in a text field, the proper behavior is to focus directly on the text field.

How to Solve The Issue?

There is a package in Flutter which is “Flutter Auto Form”.The package has two main parts:

• The form representation part
• The widget part

Form representation

The form representation consists of off-the-shelf classes that make it easy to configure the form. Instead of going through each class, let’s first look at a simple example. The most commonly used form is probably the registration form, so let’s move on.

import 'package:flutter_auto_form/flutter_auto_form.dart';

class RegistrationForm extends TemplateForm {
  @override
  final List<Field> fields = [
    AFTextField(
      id: 'identifier',
      name: 'Identifier',
      validators: [
        MinimumStringLengthValidator(
          5,
          (e) => 'Min 5 characters, currently ${e?.length ?? 0} ',
        )
      ],
      type: AFTextFieldType.NEW_USERNAME,
    ),
    AFTextField(
      id: 'email',
      name: 'E-mail',
      validators: [EmailValidator('Please enter a valid email')],
      type: AFTextFieldType.EMAIL,
    ),
    AFTextField(
      id: 'password',
      name: 'Password',
      validators: [
        MinimumStringLengthValidator(
          6,
          (e) => 'Min 6 characters, currently ${e?.length ?? 0} ',
        )
      ],
      type: AFTextFieldType.NEW_PASSWORD,
    ),
    AFBooleanField(
      id: 'accept-condition',
      name: 'Accept terms',
      validators: [ShouldBeTrueValidator('Please accept terms')],
      value: false,
    ),
  ];
}

We first extended the TemplateForm class. Then I overwrote the field variable to define a list of fields. Each field is a subclass of the Field class and can be expanded whenever a new field type is needed. The same is true for pre-built validators. All of these are inherited from the validator class.

Widget part

The widget part is even simpler than the form display part. Just create an AF Widget in the widget tree.

AFWidget<LoginForm>(
  formBuilder: () => RegistrationForm(),
  submitButton: (Function({bool showLoadingDialog}) submit) {
    return ElevatedButton(
      child: const Text('Submit'),
      onPressed: () => submit(showLoadingDialog: true), 
    );
  },
  onSubmitted: (RegistrationForm form) async {
    print(form.toMap());
  },
)

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen what is the new Form System for Flutter. Also, feel free to comment and provide any other suggestions regarding Flutter.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. Also, the portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.