WOITextField class

A text field following material design

Here is the simple version that can be used:

All of the fields in the widget are optional so by default it will only show a textfield with bit rounded corners without reflecting any information.

WOITextField(
  border: OutlineInputBorder(
    borderSide: BorderSide(
      color: Color(0xff007EDA),
    ),
    borderRadius: BorderRadius.all(
      Radius.circular(6),
    ),
  ),
  labelText: 'Email Address',
  helperText: 'Make sure it is valid',
  hintText: 'Placeholder Text',
  prefixIcon: Icon(
    Icons.email_outlined,
    color: Color(0xff007EDA),
  ),
  hintTextStyle: TextStyle(
    color: Color(0xffB6A8A8),
    fontSize: 18,
  ),
),

---

In the Widget there would be 5 types of states that can be changed based on the enum TextFieldState,

The initial state would be set to TextFieldState.initial.

Now you can change the states and then add specific customization based on the states

Futher there are 2 fields that can be deafult or customizable based on the states

These are border and textStyle. Now if values are provided in those variables and they are not reassigned in the states style then the value in these variable will be used everywhere except for the error state

The TextFieldState.error is the only state with already some different values like the text and border color and helper text color becomes red by default but can be set by providing different values to errorState variable using the WOITextFieldStyle style class

Now lets create a complex variation of the text field while utalizing its many fields So that would look something like below with the following code

---

---

WOITextField(
  labelText: 'Email Address',
  helperText: 'Invalid email',
  textFieldState: TextFieldState.error,
  errorState: WOITextFieldStyle(
    helperTextStyle: const TextStyle(
      color: Color(0xffCD3843),
    ),
    textBorders: const OutlineInputBorder(
      borderSide: BorderSide(
        color: Color(0xffCD3843),
      ),
    ),
    textStyle: const TextStyle(
      color: Color(0xffCD3843),
      fontSize: 18,
    ),
  ),
  prefixIcon: const Icon(
    Icons.email_outlined,
    color: Color(0xffCD3843),
  ),
  suffixIcon: const Icon(
    Icons.cancel,
    color: Color(0xffCD3843),
  ),
),

Inheritance

• Object
• DiagnosticableTree
• Widget
• StatefulWidget
• WOITextField

Constructors

WOITextField({Key? key, WOITextFieldStyle? initialState, WOITextFieldStyle? activeState, WOITextFieldStyle? completedState, WOITextFieldStyle? errorState, WOITextFieldStyle? disabledState, ValueChanged<String>? onChange, ValueChanged? onSubmitted, TextFieldState textFieldState = TextFieldState.initial, TextStyle? labelTextStyle, EdgeInsets? fieldContainerMargin, TextInputType? textInputType, TextEditingController? textEditingController, Color? fillColor, Widget? suffixIcon, Widget? prefixIcon, TextStyle? hintTextStyle, String hintText = '', String labelText = '', String helperText = '', Function? onTap, InputBorder? border, TextStyle? textStyle, Color? cursorColor, List<TextInputFormatter>? inputFormatters, bool showCursor = true, List<BoxShadow>? boxShadow})

const

Properties

activeState → WOITextFieldStyle?

That's the state that would show when use taps on the text field to add some value

final

border → InputBorder?

The detaul border for all states except error state and can be changed with style class

final

boxShadow → List<BoxShadow>?

Shadow for the Text field, that will only be applied to the text field inter container

final

completedState → WOITextFieldStyle?

A state that define the completed state

final

cursorColor → Color?

To define the cursor color

final

disabledState → WOITextFieldStyle?

A state to define the disable state of the text field

final

errorState → WOITextFieldStyle?

A state that would come up in case of error, it already have some default value which include the colors to red

final

fieldContainerMargin → EdgeInsets?

Margins around the text field container that would come between label and helper text

final

fillColor → Color?

Text field fill Color, by deafult it would be transparent

final

hashCode → int

The hash code for this object.

no setter, inherited

helperText → String

The helper text that would show up at the bottom left side

final

hintText → String

Placeholder Hint Text

final

hintTextStyle → TextStyle?

Placeholder Hint Text Style

final

initialState → WOITextFieldStyle?

initial default state

final

inputFormatters → List<TextInputFormatter>?

To add custom input formatters

final

key → Key?

Controls how one widget replaces another widget in the tree.

final, inherited

labelText → String

Text for Label as that would show up in the header

final

labelTextStyle → TextStyle?

label text style

final

onChange → ValueChanged<String>?

onChange call back that would return current string

final

onSubmitted → ValueChanged?

onSubmitted call back that triggers after check icon from the keyboard

final

onTap → Function?

On tap function that will trigger by tapping on textfield

final

prefixIcon → Widget?

Prefix Widget

final

runtimeType → Type

A representation of the runtime type of the object.

no setter, inherited

showCursor → bool

to show/hide the cursor in the textfield, will be set to true by deafult

final

suffixIcon → Widget?

Suffix Widget

final

textEditingController → TextEditingController?

Editing controller for the text field

final

textFieldState → TextFieldState

State enum variable

final

textInputType → TextInputType?

Input Text Type

final

textStyle → TextStyle?

This is the deafult text style for the text field value but can be changed based on the state

final

Methods

createElement() → StatefulElement

Creates a StatefulElement to manage this widget's location in the tree.

inherited

createState() → State<WOITextField>

Creates the mutable state for this widget at a given location in the tree.

override

debugDescribeChildren() → List<DiagnosticsNode>

Returns a list of DiagnosticsNode objects describing this node's children.

inherited

debugFillProperties(DiagnosticPropertiesBuilder properties) → void

Add additional properties associated with the node.

inherited

noSuchMethod(Invocation invocation) → dynamic

Invoked when a nonexistent method or property is accessed.

inherited

toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode

Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.

inherited

toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String

A string representation of this object.

inherited

toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String

Returns a string representation of this node and its descendants.

inherited

toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String

Returns a one-line detailed description of the object.

inherited

toStringShort() → String

A short, textual description of this widget.

inherited

Operators

operator ==(Object other) → bool

The equality operator.

inherited