TextField Basic¶

Text fields let users enter and edit text.

Basic¶

DesignImplementation

TextFieldBasic(
    controller: TextEditingController(),
    title: 'Title',
    hint: 'Enter value',
),

Constructors

controller or onChanged You can use this property to retrieve data
title defines the title on top field (optional)
enable you can enable field if value is false, default is true.
inputType Defines the type input for Field.
maxLength default max length limit character is 255.
multiple default is false, the properties for change to field paragraph. Max height is 4.

Multiple¶

DesignImplementation

TextFieldBasic(
    controller: TextEditingController(),
    title: 'Description',
    hint: 'Enter description',
    multiple: true,
)

Constructors

controller or onChanged You can use this property to retrieve data
title defines the title on top field (optional)
enable you can enable field if value is false, default is true.
inputType Defines the type input for Field.

Customization¶

To change the whole Field Basic 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