Skip to main content

CwTextField Documentation

Overview​

The CwTextField is a highly customizable text field widget for Flutter that allows users to input text with flexible styling, error handling, focus management, and support for various custom widgets like prefix and suffix icons, labels, and more. It provides multiple configuration options to style the text field and handle user interactions.

Parameters Explanation​

Required Parameters​

  • textEditCtrl (required): The TextEditingController for managing the text field’s content.
  • onChange (required): A callback function triggered when the text in the field changes.

Optional Parameters​

  • label: A label displayed above or inside the text field.
  • hint: A hint displayed inside the text field when no content is entered.
  • tailWidget: A widget displayed after the text field content.
  • prefixWidget: A widget displayed before the text field content.
  • suffixWidget: A widget displayed after the text field content.
  • textFieldHeight: The height of the text field.
  • textFieldWidth: The width of the text field.
  • textFieldPadding: Custom padding for the text field.
  • textFieldContentPadding: Custom padding inside the text field for content.
  • focusNode: Focus node to manage focus state.
  • isDisabled: A boolean flag to disable the text field (default: false).

Styling Parameters​

  • textFieldBackGroundColor: Background color of the text field.
  • textFieldGradient: Gradient for the background of the text field.
  • textFieldBorder: Border styling for the text field.
  • textFieldBorderRadius: Border radius for the text field.
  • textFieldLabelPosition: Determines the position of the label inside or outside the text field.
  • textFieldBackGroundFocusColor: Background color when the text field is focused.
  • textFieldFocusBorder: Border styling when the text field is focused.
  • textFieldBackGroundErrorColor: Background color when an error occurs.
  • textFieldErrorBorder: Border styling when an error occurs.
  • textFieldBackGroundDisabledColor: Background color when the text field is disabled.
  • textFieldDisabledBorder: Border styling when the text field is disabled.
  • errorWidget: A widget displayed when an error occurs.
  • labelTextStyle: Text style for the label.
  • hintStyle: Text style for the hint text.

Usage Examples​

1. Basic Text Field with Default Styling​

A simple text field with minimal configuration.

CwTextField<String>(
  textEditCtrl: TextEditingController(),
  onChange: (value) => print('Text changed: $value'),
)

2. Text Field with Custom Label and Error Widget​

A text field with a label outside and an error widget displayed below the text field.

CwTextField<String>(
  textEditCtrl: TextEditingController(),
  onChange: (value) => print('Text changed: $value'),
  label: "Username",
  textFieldLabelPosition: TextFieldLabelPosition.outside,
  errorWidget: Text('Invalid input', style: TextStyle(color: Colors.red)),
)

3. Text Field with Prefix and Suffix Widgets​

A text field with a prefix and suffix widget.

CwTextField<String>(
  textEditCtrl: TextEditingController(),
  onChange: (value) => print('Text changed: $value'),
  prefixWidget: Icon(Icons.email),
  suffixWidget: Icon(Icons.clear),
)

4. Text Field with Focus and Error States​

A text field that changes style when focused or when an error occurs.

CwTextField<String>(
  textEditCtrl: TextEditingController(),
  onChange: (value) => print('Text changed: $value'),
  textFieldBackGroundFocusColor: Colors.blue.shade100,
  textFieldFocusBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.blue)),
  textFieldBackGroundErrorColor: Colors.red.shade100,
  textFieldErrorBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.red)),
  errorWidget: Text('Invalid input', style: TextStyle(color: Colors.red)),
)

Label Positioning​

The textFieldLabelPosition parameter controls where the label is placed:

  • inside: The label is placed inside the text field (appears as a floating label when typing).
  • outside: The label is placed above the text field.
  • onBorder: The label appears on the border of the text field.

Source Code Repository​

Find the full source code on GitHub: GitHub Repository