EasyTextInput

An easy to use, complete text input brought to you by Brainn.co

Installation

Add this to your pubspec.yaml (or create it):

dependencies:
easy_text_input: ^1.0.2

Then run the flutter tooling:

flutter packages get

Demo

How to use

You will need a Bloc with a stream to controll the data flowing through the InputField, for a better explanation on how blocs work please check the example folder.

Simple Field

InputField(
              stream: exampleBloc.exampleStream,
              labelText: 'Example',
              onChanged: exampleBloc.sinkExample,
            ),

Example obscured Field

InputField(
              stream: exampleBloc.password,
              labelText: 'Password',
              onChanged: exampleBloc.sinkPassword,
              obscureText: true,
              successIcon: _successIcon,
              errorIcon: _errorIcon,
              obscureTextIconOff: EyeIcon.close,
              obscureTextIconOn: EyeIcon.open,
            ),

Example masked Field

InputField(
              stream: exampleBloc.phone,
              labelText: 'Phone',
              obscureText: true,
              onChanged: exampleBloc.sinkPhone,
              controller: MaskedTextController(mask: '(00) 00000-00000'),
              hintText: '(31) 91234-5678',
              successIcon: _successIcon,
            ),

Attributes

Customizable attributes for InputField

Attribute Name	Type	Required	Default Value	Example Value	Description
stream	Stream	true		exampleBloc.emailStream	The stream that controls the data flowing through the InputField Widget
onChanged	Function	true		exampleBloc.sinkEmail	The method that will deal with every change in the value of the focused InputField
labelText	String	false	''	'E-mail'	The Label of the InputField, The information that will float to the top of the InputField when the Widget is focused
hintText	String	false	''	'hint@example.com'	The text that will show only when the InputField is focused, to show an example of how the input should be
counterText	String	false	''	'1/6'	a small text that shows on the inferior right of the field to show the user a additional information, like a number to show the user how many characters he has typed
obscureText	bool	false		true	Controls whether the text should show or be obscured, mainly used for password fields
controller	dynamic	false		MaskedTextController(mask: '(00) 00000-00000')	The prop that will connect to the Flutter's native TextInput controller prop, a commom use for this particular prop is for controlling masks on the Text
keyboardType	TextInputType	false	TextInputType.text	TextInputType.number	Controls the type of the keyboard that will show to the user when the InputField is focused
maxLength	int	false		10	Set the maximum amount of characters the InputField will accept
errorIcon	Widget	false	const SizedBox.shrink()	ImageIcon();	The icon that will show at the end of the InputField showing that the input is invalid
successIcon	Widget	false	const SizedBox.shrink()	ImageIcon();	The icon that will show at the end of the InputField showing that the input is valid
obscureTextIconOff	Widget	false	const SizedBox.shrink()	ImageIcon();	The icon that will show at the end of the InputField showing that the obscureText feature is off
obscureTextIconOn	Widget	false	const SizedBox.shrink()	ImageIcon();	The icon that will show at the end of the InputField showing that the obscureText feature is on
borderRadius	double	false	8.0	12.0	Controls the curvature of the borders of the InputField
successColor	Color	false	Colors.green	Colors.blue	Sets the color that the InputField will be colored with when the input is considered valid
errorColor	Color	false	Colors.red	Colors.purple	Sets the color that the InputField will be colored with when the input is considered invalid