Skip to main content

CwTextField2 Documentation

Overview​

The CwTextField2 is a flexible and customizable text input field for Flutter, providing various options to manage user input. It supports various features like prefix/suffix icons, input validation, error handling, autofocus, and more. The widget allows for fine-tuned control over the appearance, behavior, and formatting of the text field.

Parameters Explanation​

Required Parameters​

  • controller: The TextEditingController to manage the text field’s content.
  • onChanged: A callback function triggered when the text in the field changes.

Optional Parameters​

  • label: The label text displayed inside the text field.
  • hint: The placeholder text displayed when no input is provided.
  • minLine: Minimum number of lines the text field should have.
  • maxLine: Maximum number of lines the text field should support.
  • maxCharacter: The maximum number of characters allowed in the text field.
  • keyboardType: The type of keyboard to be displayed (e.g., TextInputType.text, TextInputType.number).
  • leadingSpaceforTextAllowed: Whether leading spaces are allowed in the text field (default: false).
  • error: Error message to be displayed when validation fails.
  • prefixText: Text displayed as a prefix inside the text field.
  • filledColor: Background color of the text field.
  • initialValue: The initial value of the text field.
  • customPrefixIcon: Custom widget displayed as a prefix icon.
  • suffixIcon: Icon displayed as a suffix to the text field.
  • customSuffixIcon: Custom widget displayed as a suffix icon.
  • validator: A function for validating the input.
  • onTap: A callback function triggered when the text field is tapped.
  • readOnly: Whether the text field is read-only (default: false).
  • labelStyle: Custom style for the label text.
  • textInputAction: Action to be performed when the user presses the "Enter" key.
  • autoFocus: Whether the text field should automatically gain focus when displayed (default: false).
  • prefixIcon: Icon displayed as a prefix icon (can be used with customPrefixIcon).
  • showCounter: Whether to display a character counter (default: false).
  • focusNode: The FocusNode to manage focus state.
  • inputValidator: A list of input formatters to apply custom formatting to the text input.
  • hintTextStyle: Custom text style for the hint text.
  • autovalidateMode: Determines when validation should occur (default: AutovalidateMode.onUserInteraction).
  • valueTextStyle: Text style for the input value.
  • focusedBorderColor: Border color when the text field is focused.
  • focusedBorderWidth: Border width when the text field is focused.
  • showCursor: Whether to show the cursor in the text field (default: true).
  • cursorColor: The color of the cursor.
  • cursorHeight: The height of the cursor.
  • enableInteractiveSelection: Whether the user can interactively select text within the field (default: true).

Usage Examples​

1. Basic TextField2 with Label and Hint​

A simple text field with label and hint text.

CwTextfield2(
  controller: TextEditingController(),
  label: 'Username',
  hint: 'Enter your username',
  onChanged: (value) => print('Text changed: $value'),
)

2. TextField2 with Prefix and Suffix Icons​

A text field with prefix and suffix icons.

CwTextfield2(
  controller: TextEditingController(),
  label: 'Email',
  hint: 'Enter your email address',
  prefixIcon: Icons.email,
  suffixIcon: Icons.clear,
  onChanged: (value) => print('Text changed: $value'),
)

3. TextField2 with Validation and Error Handling​

A text field with custom validation and error display.

CwTextfield2(
  controller: TextEditingController(),
  label: 'Password',
  hint: 'Enter your password',
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Password cannot be empty';
    }
    return null;
  },
  error: 'Invalid password',
  onChanged: (value) => print('Text changed: $value'),
)

4. TextField2 with AutoFocus and Custom Styling​

A text field with autofocus and custom border styling.

CwTextfield2(
  controller: TextEditingController(),
  label: 'Phone Number',
  hint: 'Enter your phone number',
  autoFocus: true,
  focusedBorderColor: Colors.blue,
  focusedBorderWidth: 2,
  onChanged: (value) => print('Text changed: $value'),
)

Error Handling and Validation​

  • validator: A function to validate the input. If it returns a string, the error message will be displayed.
  • error: An optional error message that can be displayed outside of the validation function.

Border Customization​

  • focusedBorderColor: Custom color for the text field’s border when focused.
  • focusedBorderWidth: Custom width for the border when the text field is focused.

Source Code Repository​

Find the full source code on GitHub: GitHub Repository