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.

Text Field

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


Input Field With Error State


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

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 setterinherited
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.
finalinherited
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 setterinherited
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