bixat_form 0.1.0 copy "bixat_form: ^0.1.0" to clipboard
bixat_form: ^0.1.0 copied to clipboard

BixatForm: A Flutter package simplifying form creation, validation, and state management

BixatForm #

BixatForm is a Flutter package designed to simplify form creation and management in Flutter applications. It provides a powerful and flexible solution for building reactive forms with built-in validation and state management.

Features #

  • Reactive Forms: Create forms that automatically update based on user input and validation status.
  • Built-in Validation: Implement custom validation logic for each form field.
  • State Management: Easily manage form state transitions (enabled, loading, disabled, done).
  • Flexible Data Retrieval: Get form data as needed through a unified API.
  • Optional Fields: Support for optional fields that don't affect overall form validity.
  • Exclude Fields: Ability to exclude certain fields from being included in the final data.

Installation #

Add BixatForm to your Flutter project:

dependencies:
  bixat_form: ^<latest_version>

Usage #

Here's a basic example of how to use BixatForm:

import 'package:bixat_form/bixat_form.dart';
import 'package:flutter/material.dart';

class MyForm extends BixatForm {
  TextEditingController get usernameField =>
      put('username', TextEditingController());

  TextEditingController get passwordField =>
      put('password', TextEditingController());

  @override
  List<String> get optionalFields => ['terms_accepted'];

  @override
  bool onValidate(dynamic e) {
    if (e == null) return false;
    final bool result = switch (e.runtimeType) {
      TextEditingController => e.text.isNotEmpty,
      _ => true,
    };
    return result;
  }
}

class LoginFormUI extends StatelessWidget {
  final bixatForm = MyForm();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login Form')),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            TextFormField(
              controller: bixatForm.usernameField,
              decoration: InputDecoration(labelText: 'Username'),
              onChanged: (_) => bixatForm.validate(),
            ),
            SizedBox(height: 16),
            TextFormField(
              controller: bixatForm.passwordField,
              obscureText: true,
              decoration: InputDecoration(labelText: 'Password'),
              onChanged: (_) => bixatForm.validate(),
            ),
            SizedBox(height: 16),
            ValueListenableBuilder(
              valueListenable: bixatForm.state,
              builder: (context, state, __) {
                return ElevatedButton(
                  onPressed: state == BixatFormState.disabled ? null : bixatForm.submit,
                  child: Text(state == BixatFormState.loading
                      ? 'Loading...'
                      : 'Login'),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

Customization #

Optional Fields #

Define optional fields that don't affect overall form validity:

@override
List<String> get optionalFields => ['terms_accepted'];

Validation Logic #

Implement custom handling logic for each field base on type:

@override
  BixatFormActions? typeToValue(Type type) {
    final result = switch (type) {
      const (ValueNotifier<bool>) => BixatFormActions<ValueNotifier<bool>>(
          get: (e) => e.value,
          validate: (e) => e.value,
          update: (key, e, newValue) => e.value = newValue,
          clear: (e, key) => e.value = false,
        ),
      const (TextEditingController) => BixatFormActions<TextEditingController>(
          get: (e) => e.text,
          validate: (e) => e.text.isNotEmpty,
          update: (key, e, value) => e.text = value,
          clear: (e, key) => e.clear(),
        ),
      _ => null,
    };
    return result;
  }

Data Retrieval #

Get form data using:

final formData = bixatForm.data;

State Management #

BixatForm manages four states:

  1. Enabled: Form is valid and ready for submission.
  2. Loading: Form is submitting data.
  3. Disabled: Form is invalid or disabled.
  4. Done: Submission completed successfully.

Access the current state using:

final currentState = bixatForm.state.value;

Submit Functionality #

Example of handling form submission:

@override
Future<void> submit() async {
  state.value = BixatFormState.loading;
  await Future.delayed(const Duration(seconds: 3));
  state.value = BixatFormState.done;
  print(data);
  await Future.delayed(const Duration(seconds: 1));
  state.value = BixatFormState.enabled;
}

Contributing #

Contributions are welcome! Please feel free to submit issues or pull requests.

License #

This project is licensed under the MIT License - see the LICENSE.md file for details.

0
likes
150
points
33
downloads

Publisher

verified publisherbixat.dev

Weekly Downloads

BixatForm: A Flutter package simplifying form creation, validation, and state management

Repository (GitHub)

Documentation

API reference

License

MIT (license)

Dependencies

flutter

More

Packages that depend on bixat_form