What is the new Form System for Flutter?

· 4 min read
What is the new Form System for Flutter?
What is the new Form System for Flutter?

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 with only a ridiculous amount of code. But If you have already created forms using Flutter, you may find it a bit too much of a boilerplate. All the text editing controllers and focus nodes you need to create a complete experience are too much.

One good example to clarify is the following. When you complete a field, instead of clicking on the next field, the appropriate behavior would be to focus on the next field directly.

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 part consists of pre-made classes that allow you to configure your forms easily. Instead of going through each class, let’s look at a simple example first. The most used form is probably the registration form so let’s go with that one.

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,
    ),
  ];
}

As you can see, we started by extending the TemplateForm class. Then we overrode the fields variable and defined a list of fields. Each field is a sub-class of the Field class, which you can always extend if you need a new type of field. The same goes for all the pre-made validators, which all inherit from the Validator class.

Widget part

The widget part is even more straightforward than the form representation part. All you need to do is create an AFWidget in your widget’s 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 GuideFlutter 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.

Leave a Reply