TextField Currency¶

The text field price allows the user to enter and edit text, The Text field support formatter currency indonesia (Rp).

Danger

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

DesignImplementation

TextFieldCurrency(
    controller: TextEditingController(),
    title: 'Price',
    hint: 'Enter price',
)

Warning

The Text field support formatter currency indonesia (Rp). The property has character dot, please use numberDigitOnly extension for convert to Alfabet only in the controller or onChanged.

For Example :

// 10.000 convert to 10000
controller.text.numberDigitOnly;

Constructors

controller or onChanged use this property to retrieve data.
title defines the title on top field.
maxLength default max length limit character is 255.

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