Forms

Jolt provides a modified version of the default Flutter Form widget. This gives the following advantages:

All fields are available from the form state.
Calling state.value will return a Map<String, dynamic> of all the fields and their values.

In in addition to the Form widget, a modified version of FormField is provided with a required name field. The name is used when generating the Map for the form value.

With those few changes, this is how simple a Form can be:

A form in Jolt

Form(
  builder: (context, state) {
    return Column(
      children: [
        TextFormField(
          name: 'firstName',
          label: 'First Name',
          // Provide optional validation
          validation: FormValidation.required,
        ),
        Button(
          label: 'Submit',
          onTap: () => state.saveAndValidate(
            onValid: (value) {
              print(value); // returns {'firstName' : value of firstName field}
            },
          ),
        ),
      ],
    );
  },
),

Accessing FormState

Form(
  // The builder function that returns a FormState object.
  builder: (context, state) {
    // Alternatively you could get the FormState from the context.
    // final state = context.form;
    // or 
    // final state = Form.of(context);
  }
)

If you need to access form state outside of the scope of the form for some reason, you can use a GlobalKey, but this method is not recommended unless you can be sure you will never have two instances of this form at once.

Using a GlobalKey

final _formKey = GlobalKey<FormState>();
 
Form(
  key: _formKey,
  // ...
)

Type Safety

Form Validation

Nested Forms

JoltApp Fields