app_forms 0.5.0

App Forms Separate the logic from the user interface by use flutter_form_builder

App Forms

This package help you to Organize folders Structure and Forms Logic. package in development

Getting started

• Install package:

 flutter pub add app_forms

Using

• Create Form Class For Logic:

class LoginForm extends AppForm {
/// form logic
}

• Declare Form Fields:

class LoginForm extends AppForm {

  final email = AppFormField<String>(
      name: 'email',
      initialValue: '[e-mail]',
      validations: FormBuilderValidators.compose([
        FormBuilderValidators.required(),
        FormBuilderValidators.email(),
      ]),
      onChange: (field) {
        log('email State Changed ${field?.value}');
      },
      onValid: (field) {
        log('email Valid ${field?.value}');
      });

  final password = AppFormField<String>(name: 'password', initialValue: 'test');
  
   LoginForm() {
    setFields([email, password]);
  }
}

• Inject Forms in main.dart:

  AppForms.injectForms([LoginForm()]);

• Create User View login_page.dart:

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Login Page'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            AppFormBuilder<LoginForm>(
              builder: (loginForm) {
                return Column(
                  children: [
                    const SizedBox(
                      height: 30,
                    ),
                    FormBuilderTextField(
                      name: loginForm.email.name,
                      validator: loginForm.email.validations,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        label: Text('Email'),
                      ),
                    ),
                    const SizedBox(
                      height: 20,
                    ),
                    FormBuilderTextField(
                      name: loginForm.password.name,
                      validator: loginForm.password.validations,
                      obscureText: true,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        label: Text('Password'),
                      ),
                    ),
                    const SizedBox(
                      height: 30,
                    ),
                  ],
                );
              },
            ),
            AppFormListener<LoginForm>(
              builder: (form) {
                return ElevatedButton(
                    onPressed: form.progressing
                        ? null
                        : () {
                            form.submit();
                          },
                    child: Text('Submit ${form.email.value}'));
              },
            ),
          ],
        ),
      ),
    );
  }
}