Flutter | Text Input | Made with Supernova

Flutter

Is new design vision part implemented using new tokens?

Up to date

Storybook

Flutter Storybook

Source

GitHub code


                                                        
                                                        
                                                            OptimusInputField(
                                                                  isEnabled: true,
                                                                  isRequired: false,
                                                                  isPasswordField: false,
                                                                  prefix: const Text('prefix'),
                                                                  suffix: const Text('suffix'),
                                                                  leading: const Icon(OptimusIcons.add),
                                                                  isClearEnabled: true,
                                                                  showLoader: false,
                                                                  errorVariant: OptimusInputErrorVariant.bottomHint,
                                                                  size: OptimusWidgetSize.large,
                                                                  label: 'Label',
                                                                  placeholder: 'Placeholder',
                                                                  caption: const Text('Caption'),
                                                                  captionIcon: OptimusIcons.action_log,
                                                                  helperMessage: helperMessage.isNotEmpty ? Text(helperMessage) : null,
                                                                  error: error,
                                                                ),
                                                              )

OptimusInputField example

Forms/Input Field

Name	Description	Type	Default Value
onChanged	Callback on input change	ValueChanged<String>?
placeholder	Placeholder of the input	String?
placeholderStyle	Custom style of the placeholder	TextStyle?
keyboardType	Type of the virtual keyboard to show	TextInputType?
isPasswordField	Whether to show password field controls and hide input	bool	false
isEnabled	Whether the component is enabled	bool	true
textinputAction	Action on confirming input	TextInputAction?
onSubmitted	Callback on submitting the input	ValueChanged<String>?
focusNode	Custom FocusNode to control the input focus flow	FocusNode?
label	Label above the input	String?
caption	The caption above the input	Widget?
captionIcon	Icon of the caption	IconData?	OptimusIcons.info
helperMessage	Message to be displayed below the input	Widget?
maxLines	Max lines of the input	int	1
minLines	Min lines of the input	int?
controller	Custom text edit controller for the input	TextEditingController?
error	The error message of the input	String?
errorVariant	The way error should be displayed	OptimusInputErrorVariant	OptimusInputerrorVariant.bottomHint
enableInteractiveSelection	Whether to enable selection actions	bool	true
autofocus	Whether to autofocus on the first show	bool	false
autocorrect	Whether to show autocorrect tips	bool?	true
hasBorder	Whether input should have borders	bool	true
isRequired	Whether the input is required	bool	false
isFocused	Whether the current input should be focused	bool
isClearEnabled	Whether to show clear all button	bool	false
suffix	Suffix text of the input	Widget?
prefix	Prefix text of the input	Widget?
leading	The leading icon of the input	Widget?
trailing	The trailing icon of the input	Widget?
inputKey	Key for the input widget	Key?
fieldBoxKey	Key for the input wrapper	Key?
readOnly	Whether the input is readOnly	bool	false
onTap	Callback on input field tap	VoidCallback?
textAlign	Alignment of the text inside the input	TextAlign	TextAlign.start
textCapitalization	Whether text should be capitalized	TextCapitalization	TextCapitalization.none
size	The size of the input	OptimusWidgetSize	OptimusWidgetSize.large
showCursor	Whether the cursor should be visible	bool?
showLoader	Whether the loader should be visible	bool	false
inputFormatters	List of the custom formatters for the input	List<TextInputFormatter>?
keyboardAppearance	Defined the appearance of the keyboard	Brightness?
enabldIMEPersonalizedLearning	Enabling/disabling learning for the system keyboard	bool	true
enableSuggestions	Enabling/disabling the suggestions for the input	bool	true

Text Input

Resources

Examples

API