CupertinoTextField Widget – Flutter Widget Guide By Flutter Agency

• Flutter Widget Guide

Earlier we have been through Textfield Widget in Material Design so now we will go through CupertinoTextField Widget in detail.

What is CupertinoTextField Widget?

CupertinoTextField Widget is an iOS-style text field. A text field lets the user enter text, either with a hardware keyboard or with an onscreen keyboard.

This widget corresponds to both a UITextField and an editable UITextView on iOS.

The text field calls the onChanged() callback whenever the user changes the text in the field. If the user indicates that they are done typing in the field e.g., by pressing a button on the soft keyboard, the text field calls the onSubmitted() callback.

To control the text that is displayed in the text field, use the controller.

Default constructor of CupertinoTextField Widget will look like below:

CupertinoTextFieldWidget({
   Key key,
   TextEditingController controller,
   FocusNode focusNode,
   BoxDecoration decoration: _kDefaultRoundedBorderDecoration,
   EdgeInsetsGeometry padding: const EdgeInsets.all(6.0),
   String placeholder,
   TextStyle placeholderStyle: const TextStyle(
       fontWeight: FontWeight.w400, color: CupertinoColors.placeholderText),
   Widget prefix,
   OverlayVisibilityMode prefixMode: OverlayVisibilityMode.always,
   Widget suffix,
   OverlayVisibilityMode suffixMode: OverlayVisibilityMode.always,
   OverlayVisibilityMode clearButtonMode: OverlayVisibilityMode.never,
   TextInputType keyboardType,
   TextInputAction textInputAction,
   TextCapitalization textCapitalization: TextCapitalization.none,
   TextStyle style,
   StrutStyle strutStyle,
   TextAlign textAlign: TextAlign.start,
   TextAlignVertical textAlignVertical,
   bool readOnly: false,
   ToolbarOptions toolbarOptions,
   bool showCursor,
   bool autofocus: false,
   String obscuringCharacter: '•',
   bool obscureText: false,
   bool autocorrect: true,
   SmartDashesType smartDashesType,
   SmartQuotesType smartQuotesType,
   bool enableSuggestions: true,
   int maxLines: 1,
   int minLines,
   bool expands: false,
   int maxLength,
   bool maxLengthEnforced: true,
   ValueChanged<String> onChanged,
   VoidCallback onEditingComplete,
   ValueChanged<String> onSubmitted,
   List<TextInputFormatter> inputFormatters,
   bool enabled,
   double cursorWidth: 2.0,
   Radius cursorRadius: const Radius.circular(2.0),
   Color cursorColor,
   BoxHeightStyle selectionHeightStyle: ui.BoxHeightStyle.tight,
   BoxWidthStyle selectionWidthStyle: ui.BoxWidthStyle.tight,
   Brightness keyboardAppearance,
   EdgeInsets scrollPadding: const EdgeInsets.all(20.0),
   DragStartBehavior dragStartBehavior: DragStartBehavior.start,
   bool enableInteractiveSelection: true,
   GestureTapCallback onTap,
   ScrollController scrollController,
   ScrollPhysics scrollPhysics,
   Iterable<String> autofillHints,
 });

In the Above constructor, all fields marked with @required must not be empty.

Properties:

Some of few properties are described below:

• Key key: A new widget will only be used to update an existing element if its key is the same as the key of the current widget associated with the element.
• TextEditingController controller: A TextEditingController can also be used to provide an initial value for a text field. If you build a text field with a controller that already has text, the text field will use that text as its initial value.
• FocusNode focusNode: An object that can be used by a stateful widget to obtain the keyboard focus and to handle keyboard events. FocusNodes are persistent objects that form a focus tree that is a representation of the widgets in the hierarchy that are interested in focus. A focus node might need to be created if it is passed in from an ancestor of a Focus Widget to control the focus of the children from the ancestor, or a widget might need to host one if the widget subsystem is not being used, or if the Focus and FocusScope Widget provide insufficient control.
• BoxDecoration decoration: An immutable description of how to paint a box. The BoxDecoration class provides a variety of ways to draw a box. The box has a border, a body, and may cast a boxShadow.The shape of the box can be a circle or a rectangle. If it is a rectangle, then the borderRadius property controls the roundness of the corners.
• EdgeInsetsGeometry padding: Base class for EdgeInsets that allows for text-direction aware resolution.A property or argument of this type accepts classes created either with new EdgeInsets.fromLTRB and its variants, or new EdgeInsetsDirectional.fromSTEB and its variants.To convert an EdgeInsetsGeometry object of indeterminate type into an EdgeInsets object, call the resolve method.
• TextStyle placeholderStyle: An immutable style in which paint text.
• Widget prefix: Describes the configuration for an Element. Widgets are the central class hierarchy in the Flutter framework. A widget is an immutable description of part of a user interface. Widgets can be inflated into elements, which manage the underlying render tree.
• OverlayVisibilityMode prefixMode: Visibility of text field overlays based on the state of the current text entry.Used to toggle the visibility behavior of the optional decorating widgets surrounding the EditableText such as the clear text button.
• OverlayVisibilityMode suffixMode: OverlayVisibilityMode.Always show the overlay regardless of the text entry state.
• TextInputType keyboardType: The type of information for which to optimize the text input control. On Android, the behavior may vary across devices and keyboard providers. This class stays as close to the Enum interface as possible and allows for additional flags for some input types. For example, numeric input can specify whether it supports decimal numbers and/or signed numbers.
• TextInputAction textInputAction: An action the user has requested the text input control to perform.Each action represents a logical meaning and also configures the soft keyboard to display a certain kind of action button. The visual appearance of the action button might differ between versions of the same OS.
• TextCapitalization textCapitalization: Configures how the platform keyboard will select an uppercase or lowercase keyboard. Only supports text keyboards, other keyboard types will ignore this configuration. Capitalization is locale-aware.
• TextStyle style: An immutable style in which paint text.
• StrutStyle strutStyle: StrutStyle strut defines the minimum height a line can relative to baseline
• TextAlign textAlign: Whether and how to align text horizontally.
• TextAlignVertical textAlignVertical: The vertical alignment of text within an input box.A single y value that can range from -1.0 to 1.0. -1.0 aligns to the top of an input box so that the top of the first line of text fits within the box and its padding. 0.0 aligns to the center of the box. 1.0 aligns so that the bottom of the last line of text aligns with the bottom interior edge of the input box.
• ToolbarOptions toolbarOptions: Toolbar configuration for EditableText.Toolbar is a context menu that will show up when users right-click or long-press the EditableText. It includes several options: cut, copy, paste, and select all.
• SmartQuotesType smartQuotesType: Indicates how to handle the intelligent replacement of quotes in text input.
• SmartDashesType smartDashesType: Indicates how to handle the intelligent replacement of dashes in text input.
• ValueChanged<T>: Signature for callbacks that report that an underlying value has changed.
• ValueChanged<String> onSubmitted(): Called when the user indicates that they are done editing the text in the field.
• List<TextInputFormatter> inputFormatters: Optional input validation and formatting overrides.Formatters are run in the provided order when the text input changes.
• Brightness keyboardAppearance: The appearance of the keyboard. This setting is only honored on iOS devices.
• double cursorWidth: The cursor will draw under the text. The cursor width will extend to the right of the boundary between characters for left-to-right text and to the left for right-to-left text. This corresponds to extending downstream relative to the selected position. Negative values may be used to reverse this behavior.
• Radius cursorRadius: How rounded the corners of the cursor should be. By default, the cursor has no radius.
• Color cursorColor: The color to use when painting the cursor.
• BoxHeightStyle selectionHeightStyle: It will controls how tall the selection highlight boxes are computed to be.
• BoxWidthStyle selectionWidthStyle: It will controls how the width selection highlight boxes are computated to be.
• Brightness keyboardAppearance: It will specify the appearance of the keyboard.
• EdgeInsets scrollPadding: Configures padding to edges surrounding a Scrollable when the Textfield scrolls into view.
• DragStartBehavior dragStartBehavior: It will determine the way drag start behavior is handled.
• bool enableInteractiveSelection: If true, then long-pressing this TextField will select text and show the cut/copy/paste menu, and tapping will move the text caret.
• GestureTapCallback(): Signature for when a tap has occurred.
• ScrollController scrollController(): The ScrollController to use when vertically scrolling the input.
• ScrollPhysics scrollPhysics: The ScrollPhysics to use when vertically scrolling the input.

Conclusion:

In this article, we have been through What is CupertinoTextField Widget in Flutter along with it’s all properties in a Flutter.

Thanks for reading !!!
Do let us know your suggestion/feedback to serve you better.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Written by Abhishek Dhanani

Abhishek Dhanani, a skilled software developer with 3+ years of experience, masters Dart, JavaScript, TypeScript, and frameworks like Flutter and NodeJS. Proficient in MySQL, Firebase, and cloud platforms AWS and GCP, he delivers innovative digital solutions.