## Install

This will add `lo_form` to your package's `pubspec.yaml` (and run an implicit `dart pub get`):

```shell
flutter pub add lo_form
```

## Simple Example

In this example, you will learn how to create a simple form for newsletter subscription, with a simple validation for the email field.

> You can find the **full code at the end** if you don't want to go step-by-step.

 1. Create `NewsletterForm` widget.

    ```dart
    import 'package:flutter/material.dart';
    import 'package:lo_form/lo_form.dart';

    class NewsletterForm extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container();
      }
    }
    ```

 1. Design the form using `LoForm` widget as a wrapper and `Lo-*` widgets for fields. Note that each field must have a unique `name` that will be used to access it later.

    ```dart
    class NewsletterForm extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return LoForm(
          builder: (form) {
            return Column(
              children: [
                LoTextField(
                  name: 'Email',
                ),
                const SizedBox(height: 32),
                ElevatedButton(
                  onPressed: () {},
                  child: const Text('Subscribe'),
                ),
              ],
            );
          },
        );  
      }
    }
    ```

 1. Add validation to the `Email` field:

    ```dart
    LoTextField(
      name: 'Email',
      validators: [
        LoRequiredValidator(),
        LoRegExpValidator.email(),
      ],
    )
    ```

 1. Implement what happens when the form is submitted, then return `true` if the submission completed successfully, or `false` if something wrong happened:

    ```dart
    LoForm(
      onSubmit: (values, setErrors) {
        print('Welcome ${values.get('Email')}');
        return true;
      },
      builder: (form) {
        // Rest of code...
      },
    )
    ```

 1. Call the submit method using `form` variable:

    ```dart
    ElevatedButton(
      onPressed: form.submit,
      child: const Text('Subscribe'),
    )
    ```

 1. Choose when the form can be submitted, by setting `submittableWhen`, this will disable the submit button whenever the status doesn't match.

    ```dart
    LoForm(
      submittableWhen: (status) => status.isValid,
      onSubmit: (values, setErrors) {
        // Rest of code...
      },
      builder: (form) {
        // Rest of code...
      },
    )
    ```

 1. Full code:

    ```dart
    import 'package:flutter/material.dart';
    import 'package:lo_form/lo_form.dart';

    class NewsletterForm extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return LoForm(
          submittableWhen: (status) => status.isValid,
          onSubmit: (values, setErrors) {
            print('Welcome ${values.get('Email')}');
            return true;
          },
          builder: (form) {
            return Column(
              children: [
                LoTextField(
                  name: 'Email',
                  validators: [
                    LoRequiredValidator(),
                    LoRegExpValidator.email(),
                  ],
                ),
                const SizedBox(height: 32),
                ElevatedButton(
                  onPressed: form.submit,
                  child: const Text('Subscribe'),
                ),
              ],
            );
          },
        );  
      }
    }
    ```

## Advanced Example

For a more advanced example,
check the [`RegisterForm`](https://github.com/YoussefRaafatNasry/lo_form/blob/master/package/example/lib/main.dart#L10)
widget that is used in the [demo](https://youssefraafatnasry.github.io/lo_form/).