Flutter Auto Form

pub package

The easiest way to create fully customizable forms with only a tiny amount of code.

Installation

To use this plugin, add flutter_auto_form as a dependency in your pubspec.yaml file.

pubspec.yaml 

dependencies:
  flutter:
    sdk: flutter

  # Your other packages  ...

  flutter_auto_form: ^0.4.3

Support

  • Platforms: All platforms currently supported
  • Autofill hints: Automatic support through AFTextFieldType
  • Validators: Email, Url, Hex colour, Not null, Minimum string length, Same as another field, Alphanumeric.
  • Fields: Password (auto obscure toggle), Text, Number, Model (built-in support for search through an api), Boolean, Sub-form (cascading forms), Select (dropdown field allowing only predefined values)
  • Custom code: You can customize and create new fields, validators, widgets as you please without even touching the source code of this package !

Example

The following gif illustrates some things you can realize with this package.

The source code is located in the example folder.

Usage

The first step in creating a form with Flutter Auto Form is to create a class inheriting from the TemplateForm class.

import 'package:flutter_auto_form/flutter_auto_form.dart';

import 'package:flutter_auto_form/flutter_auto_form.dart';

class LoginForm 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.USERNAME,
    ),
    AFTextField(
      id: 'password',
      name: 'Password',
      validators: [
        MinimumStringLengthValidator(
          6,
              (e) => 'Min 6 characters, currently ${e?.length ?? 0} ',
        )
      ],
      type: AFTextFieldType.PASSWORD,
    ),
    AFBooleanField(
      id: 'accept-condition',
      name: 'Accept terms',
      validators: [ShouldBeTrueValidator('Please accept terms to continue?')],
      value: false,
    )
  ];
}

The second & (already) last step is to add the AFWidget wherever you would like to display a form.

AFWidget<RegistrationForm>(
  formBuilder: () => RegistrationForm(),
  submitButton: (Function({bool showLoadingDialog}) submit) => Padding(
    padding: const EdgeInsets.only(top: 32),
    child: MaterialButton(
      child: Text('Submit'),
      onPressed: () => submit(showLoadingDialog: true),
    ),
  ),
  onSubmitted: (RegistrationForm form) {
    // do whatever you want when the form is submitted
    print(form.toMap());
  },
);

The AFTextField and AFNumberField are the only two fields available by defaults for the time being.

Advanced usage

DOCUMENTATION COMING SOON

This package is still under construction ! Do not hesitate to create an issue on the GitHub page if you find any bug or if you would like to see a new type of validator, field coming. And if you are that motivated if you would gladly review & accept your PR !

Libraries

auto_form