TextField Auth¶

Text fields let users enter and edit text. The text field for type Auth.

Danger

This component on development, if you use the component please follow this documentation.

TextField Email¶

Text fields special for input Email. This field has validation email and [not empty].

DesignImplementation

TextFieldEmail(
    onChanged: (String? value) {},
    title: 'Email',
    hint: 'Enter your email',
    validator: (_) => state.email.error?.name,
)

Warning

You can implement validator on package form_inputs, if you need custom the validator please open form_inputs/src/login/email.dart, for example:

class Email extends FormzInput<String, EmailValidationError> {
    const Email.pure() : super.pure('');

    const Email.dirty([String value = '']) : super.dirty(value);

    static final RegExp _emailRegExp = RegExp(
        r'^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$',
    );

    @override
    EmailValidationError? validator(String? value) {
        if (value!.isEmpty) return EmailValidationError.empty;
        if(!_emailRegExp.hasMatch(value)) return EmailValidationError.invalid;
        return null;
    }
}

Constructors

onChanged use this property to retrieve data.
title defines the title on top field.
validator for handle message error if validation is wrong.

TextField Password¶

Text fields special for input Password. This field has validation password and [not empty].

DesignImplementation

TextFieldPassword(
    onChanged: (String? value) {},
    title: 'Password',
    hint: 'Enter your password',
    validator: (_) => state.password.error?.name,
)

Warning

You can implement validator on package form_inputs, if you need custom the validator please open form_inputs/src/login/password.dart, for example:

class Password extends FormzInput<String, PasswordValidationError> {
  const Password.pure() : super.pure('');

  const Password.dirty([String value = '']) : super.dirty(value);

  static final _passwordRegExp = RegExp(r'^(?=.*[A-Za-z])(?=.*\d)(?=.*[@$!%*#?&])[A-Za-z\d@$!%*#?&]{8,}$');

  @override
  PasswordValidationError? validator(String? value) {
      if (value!.isEmpty) return PasswordValidationError.empty;
      if (!_passwordRegExp.hasMatch(value)) return PasswordValidationError.invalid;
      return null;
  }
}

Constructors

onChanged use this property to retrieve data.
title defines the title on top field.
validator for handle message error if validation is wrong.

Customization¶

To change the whole Input Theme, please open the core/themes/app_theme.dart. Here's how to change the Widget TextField theme:

inputDecorationTheme: InputDecorationTheme(
  contentPadding: const EdgeInsets.all(AppDimens.paddingMedium),
  errorStyle: const TextStyle(color: AppColors.red),
  alignLabelWithHint: true,
  floatingLabelBehavior: FloatingLabelBehavior.never,
  hintStyle: TextStyle(color: AppColors.grey.shade300),
  border: OutlineInputBorder(
    borderSide: BorderSide(color: AppColors.grey.shade100, width: 1),
    borderRadius: BorderRadius.circular(AppDimens.radiusMedium),
  ),
  enabledBorder: OutlineInputBorder(
    borderSide: BorderSide(color: AppColors.grey.shade300, width: 1),
    borderRadius: BorderRadius.circular(AppDimens.radiusMedium),
  ),
  focusedBorder: OutlineInputBorder(
    borderSide: const BorderSide(color: AppColors.secondary, width: 1.5),
    borderRadius: BorderRadius.circular(AppDimens.radiusMedium),
  ),
  errorBorder: OutlineInputBorder(
    borderSide: const BorderSide(color: AppColors.red, width: 1.5),
    borderRadius: BorderRadius.circular(AppDimens.radiusMedium),
  ),
  focusedErrorBorder: OutlineInputBorder(
    borderSide: const BorderSide(color: AppColors.red, width: 1.5),
    borderRadius: BorderRadius.circular(AppDimens.radiusMedium),
  ),
)

Authors: Nanang Prasetya