ux_kit_hooks

ux_kit_hooks builds on top of ux_kit_core and provides Flutter Hooks support for managing form state, validation, and inputs.

It makes working with forms declarative, reactive, and simple, while keeping behavior separate from styling.

Getting started

Prerequisites:

• Flutter 3.0 or higher
• Dart 3.8 or higher

Usage

class SignUpForm {
  const SignUpForm({
    this.firstName = '',
    this.lastName = '',
    this.email = '',
    this.password = '',
  });

  final String firstName;
  final String lastName;
  final String email;
  final String password;

  factory SignUpForm.formatter(List values) {
    return SignUpForm(
      firstName: values[0],
      lastName: values[1],
      email: values[2],
      password: values[3],
    );
  }

  static const FormConfig<SignUpForm> config = FormConfig(
    list: [
      TextConfig(
        label: 'First Name',
        hint: 'first name',
        validation: Validation(
          validator: Validator.required(),
          message: 'First name is required',
        ),
      ),
      TextConfig(
        label: 'Last Name',
        hint: 'last name',
        validation: Validation(
          validator: Validator.required(),
          message: 'Last name is required',
        ),
      ),
      EmailConfig(
        label: 'Email',
        hint: 'email',
        validation: Validation.queue([
          Validation(
            validator: Validator.required(),
            message: 'Email is required',
          ),
          Validation(
            validator: Validator.email,
            message: 'Email is invalid',
          ),
        ]),
      ),
      PasswordConfig(
        label: 'Password',
        hint: 'password',
        validation: Validation.queue([
          Validation(
            key: 'password',
            validator: Validator.required(),
            message: 'Password is required',
          ),
          Validation(
            key: 'password',
            validator: Validator.minLength(8),
            message: 'Password must be at least 8 characters long',
          ),
        ]),
      ),
      PasswordConfig(
        label: 'Confirm Password',
        hint: 'confirm password',
        validation: Validation.relatedTo('password',
          validatorBuilder: IsSameAsValidator.new,
          message: 'Passwords do not match',
        ),
      ),
    ],
    formatter: SignUpForm.formatter,
  );
}

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

  @override
  Widget build(BuildContext context) {
    return MyForm(
      config: SignUpForm.config,
      onSubmit: (SignUpForm form) {
        // TODO: submit form
      },
    );
  }
}

class MyForm<T> extends HookWidget {
  const MyForm({
    super.key,
    required this.config,
    required this.onSubmit,
    this.value,
  });

  final FormConfig<T> config;
  final void Function(T formattedValue) onSubmit;
  final FutureOr<List>? value;

  @override
  Widget build(BuildContext context) {
    final form = useInput.form(
      config: config,
      value: value,
    );
    return ListView(
      children: [
        for (final input in form.list)
          if (input case FieldInput())
            MyTextField(input: input),
        ElevatedButton(
          onPressed: () {
            if (form.validate()) {
              onSubmit(form.formatted);
            }
          },
          child: const Text('Submit'),
        ),
      ],
    );
  }
}


class MyTextField extends HookWidget {
  const MyTextField({super.key, required this.input});

  final FieldInput input;

  @override
  Widget build(BuildContext context) {

    String? errorText;
    final validationResult = useListenable(input.validationResult).value;
    if (validationResult case HasMessage(isValid: final isValid, message: final message) when !isValid && message is String) {
      errorText = message;
    }

    bool obscureText = false;
    if (input case PasswordInput(obscure: final obscure)) {
      obscureText = useListenable(obscure).value;
    }

    return TextField(
      controller: input.textEditing,
      focusNode: input.focusNode,
      autocorrect: input is! PasswordInput,
      obscureText: obscureText,
      keyboardType: input.keyboardType,
      inputFormatters: input.inputFormatters,
      autofillHints: input.autofillHints,
      decoration: InputDecoration(
        labelText: input.config.label,
        hintText: input.config.hint,
        errorText: errorText,
      ),
    );
  }
}

extension on FieldInput {
  TextInputType get keyboardType {
    return switch (this) {
      PasswordInput() => TextInputType.visiblePassword,
      PhoneInput() => TextInputType.phone,
      TextInput() => TextInputType.text,
      NumberInput() => TextInputType.number,
      EmailInput() => TextInputType.emailAddress,
      DateInput() => TextInputType.datetime,
      AddressInput() => TextInputType.streetAddress,
    };
  }

  List<TextInputFormatter>? get inputFormatters {
    return switch (this) {
      PhoneInput() ||
      NumberInput() => [FilteringTextInputFormatter.digitsOnly],
      _ => null,
    };
  }

  List<String>? get autofillHints {
    return switch (this) {
      PasswordInput() => [AutofillHints.password],
      PhoneInput() => [
        AutofillHints.telephoneNumberNational,
        AutofillHints.telephoneNumber,
      ],
      EmailInput() => [AutofillHints.email],
      DateInput() => [AutofillHints.birthday],
      AddressInput() => [AutofillHints.fullStreetAddress],
      _ => null,
    };
  }
}

Dependencies

This package depends on:

• ux_kit_core
• flutter_hooks