Skip to content
This repository has been archived by the owner on Jan 4, 2022. It is now read-only.
/ easy_text_input Public archive

A complete, customisable, non-verbose and easy to use InputField

License

Notifications You must be signed in to change notification settings

brainnco/easy_text_input

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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 '' '[email protected]' 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

About

A complete, customisable, non-verbose and easy to use InputField

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published