TextField Date Picker¶

The text field date allows the user to select date.

Danger

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

DesignImplementation

TextFieldDatePicker(
    controller: TextEditingController(),
    title: 'Date time',
    hint: 'Select date'
)

Warning

The Text field return String formatter e.g 12 January 2022 and use the extention is yMMMMd. For convert to DateTime on controller please use:

// [12 January 2022] convert to [2022-01-12 00:00:00]
controller.text.toDateTime;

Constructors

controller use this property to retrieve data.
title defines the title on top field.
initialDate default is DateTime.now(), initial value selected.
firstDate default is DateTime(1945), The [firstDate] is the earliest allowable date.
lastDate default is DateTime.now(), The [lastDate] is the latest allowable date.

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