TextField Tags¶

This widget allows you to create a textfield that takes in Textfield values and display the values as tags.

Danger

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

DesignImplementation

TextFieldTagCustom(
    controller: TextfieldTagsController(),
    title: 'Tag',
    hint: 'Enter tag',
)

Constructors

controller use this property to retrieve data.
title defines the title on top field.
tooltip defines the info icon button and then showing the tooltip.

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),
  ),
)

Support Packages¶

Info

The Textfield Tag uses the textfield_tags package to call TextFieldTags. For more can be learned in Pub Dev.

Authors: Nanang Prasetya