An Introduction to Flutter Cupertino Widgets

CupertinoActionSheet

An action sheet is a specific style of alert that presents the user with a set of two or more options related to the current context. An action sheet may contain a title, an additional message, and a list of actions. The title is displayed above the message and the actions are displayed below this content.   This action sheet styles its title and message to match the standard iOS action sheet title and message text style.   To display an action button that looks like a standard iOS action sheet button, provide CupertinoActionSheetActions for the actions assigned to this action sheet.   To include an iOS-style cancel button different from other buttons, provide a CupertinoActionSheetAction for the CancelButton given to this action sheet.  An action sheet is usually given to the ShowCupertinoModalPopup as a child widget, which displays the action sheet from the bottom of the screen.

CupertinoActivityIndicator

An iOS-style activity indicator that rotates clockwise.

CupertinoAlertDialog

The alert dialog informs the user about situations that require acknowledgment. An alert dialog has an optional title, optional contents, and an optional list of actions. The title is displayed above the content and the actions are displayed below the content.

This dialog styles its title and content (usually a message) to match the standard iOS title and message dialog text style. These default styles can be overridden by explicitly defining TextStyles for flutter cupertino widgets that are part of the title or content.

To display action buttons that look like standard iOS dialog buttons, provide CupertinoDialogActions for the functions assigned to this dialog. The show is usually passed as a child widget, which displays the dialog.

CupertinoButton

Moves in a text or an icon that stays outside and in contact. Alternatively there may be a background.  

CupertinoContextMenu

A full-screen modal route that opens when the child is long-pressed.

When open, CupertinoContextMenu shows the child, or is returned by the widget preview, if from a given button, with a list of buttons specified by functions in a large full-screen overlay. The child / preview is placed in an extended widget so that it grows to fill the overlay if its size is unpublished.

When closed, CupertinoContextMenu simply displays the child as if CupertinoContextMenu were not. Size and position are unaffected. The menu can be closed like other popup routes, such as by tapping the background or calling Navigator.pop (context). Unlike a popupout, it can also be closed by swiping downwards.  

CupertinoDatePicker

There are several methods of date picker listed in CupertinoDatePickerMode. The class will display its children as consecutive columns. The order of its children is based on internationalization.

The picker at the bottom of the screen can be used with showCupertinoModalPopup to moderately display. Shapes itself for its parents when not given full screen width and may not render correctly. Content text is shown with CupertinoTextThemeData.dateTimePickerTextStyle.

CupertinoDialog

This dialog widget has no opinion about the content of the dialog. Instead of using this widget directly, consider using CupertinoAlertDialog, which implements a specific type of dialog.

CupertinoDialogAction

A button is typically used in a CupertinoAlertDialog.

CupertinoFullscreenDialogTransition

An iOS-style transition used to synchronize fullscreen dialogs.  

CupertinoNavigationBar

The navigation bar is a toolbar, with a widget in the middle of the toolbar, usually a page title. It also supports a major and trailing widget before and after the middle widget, keeping the middle widget centered. If none is provided and is automatically correct (true by default). If none is provided and is automatically true (true by default) by default the middle widget will be a title text from the current CupertinoPageRoute.

It should be placed at the top of the screen and automatically accounts for the status bar of the OS. If the opacity of a given backgroundrailer is not 1.0 (which is the case by default), it will create a blur effect for the material behind it.

When transitionBetweenRoutes is true, this navigation bar will transition over routes instead of inside them if the transitioned route is also set with a CupertinoNavigationBar or a CupertinoSliverNavigationBar transition. If the transitionBetweenRoutes is true, any parameter of the widget cannot contain a key in its subtree because the widget will exist in the tree at multiple locations simultaneously.

By default, only one CupertinoNavigationBar or CupertinoSliverNavigationBar must be present in each PageRoute to support the default transition. Use transitionBetweenRoutes or hero Tags to optimize transition behavior for multiple navigation bars per route.

When used in a CupertinoPageScaffold, the text scale factor of CupertinoPageScaffold.navigationBar is set to 1.0 and does not respond to text scale factor changes from the operating system, so that it matches the original iOS behavior. To override this behavior, wrap the components of each navigationBar inside MediaQuery with the desired MediaQueryData.textScaleFactor value. Text scale factor values ​​can be retrieved from the operating system in many ways, such as querying MediaQuery.textScaleFactorOf against CupertinoApp’s BuildContext.

CupertinoPageScaffold

A single iOS application implements the layout of the page. The scaffold lets out the contents between the top navigation bar and the navigation bar, or behind.

CupertinoPageTransition

Provides an iOS-style page transition animation. The page slides from the right and exits in reverse. It shifts left in parallax motion when another page enters to cover it.

CupertinoPicker

Displays your children’s flutter cupertino widgets on a wheel for selection and calls back when the currently selected item changes.  

By default, the first child in children will be the initially selected child. A different child’s index can be specified in the scrollcontroller, making that child the initially selected child.

The picker at the bottom of the screen can be used with showCupertinoModalPopup to moderately display. Shapes himself for his parents. All children are the same size based on the item.

CupertinoPopupSurface

Rounded rectangular surfaces like a rectangular popup surface, for example, warning dialogs and action sheets.   A CupertinoPopupSurface can be configured to paint white or not on top of its blurred area. Specific use should be painted white on top of the smear. However, white color can be disabled for the purpose of rendering split intervals for more complex layouts, e.g., CupertinoAlertDialog. Additionally, white can be disabled to render a blurred round rectangle without any color (similar to the volume control popup of iOS).  

CupertinoScrollbar

The scrollbar indicates which part of the scrollable widget is actually visible.   To add a scrollbar to a scrollview, simply wrap the scroll widget into the Cupertino Scrollbar widget.   By default, CupertinoScrollbar will be draggable (a feature introduced in iOS 13), it uses the PrimaryScrollController. For multiple scrollbars, or other more complex situations, see Controller parameters.  

CupertinoSegmentedControl

Displays the flutter cupertino widgets provided in the children’s map in the horizontal list. Used to choose between a number of mutually exclusive options. When one option is selected in the segment control, the other options in the segment control are left unselected.   A fragmented control can represent any widget as a value in its child map. T Type Each widget is used to identify and determine which key. As required by the map class, the keys must be of a consistent type and be comparable. The order section of the keys will determine the order of the widget in the control.
When the status of the fragmented control changes, the widget calls the onValueChanged callback. The map key associated with the newly selected widget is returned in the onValueChanged callback. Typically, flutter cupertino widgets that use fragmented controls will listen for onValueChanged callbacks and rebuild fragmented controls with a new GroupValue to update the currently selected option.
Children will be displayed in the order of keys in the map. The height of the section control is determined by the height of the tallest widget provided as a value in the children’s map. The width of each child in the segment control will be equal to the width of the wider child, as long as the combined width of the children is wider than the available horizontal space. In this case, the available horizontal space is divided by the number of children provided to determine the width of each widget. The selection area for each widget in the children’s map will be expanded to fill the count space, so the same dimensions will appear in each widget.
A segmented control can be optionally created with optional colors. The deselected Color, SelectColor, BorderColor, and PressedColor arguments can be used to override the colors of a fragmented control by cupertinoTheme defaults.

CupertinoSlider

Used to select from a range of values.  

A slider can be used to select from a continuous or discrete set of values. The use of defaults uses a continuous range from minimum to maximum. To use discrete values, use a non-zero value for the partitions, indicating the number of discrete intervals. For example, if the minimum is 0.0 and the maximum is 50.0 and the division is 5, then take the slider values ​​to 5.0, 10.0, 20.0, 30.0, 60.0, and 50.0 Can.

The slider itself does not retain any state. Instead, when the position of the slider changes, the widget calls the on-call callback. Most flutter cupertino widgets that use a slider will listen for an onChanged callback and rebuild the slider with a new value to update the slider’s visual appearance.

CupertinoSlidingSegmentedControl

Displays the widgets provided in the children’s map in the horizontal list. Used to choose between a number of mutually exclusive options. When one option is selected in the segment control, the other options in the segment control are left unselected.   A fragmented control can represent any widget as a value in its child map. The T Type is the type of map keys used to identify each widget and determine which widget is selected. As required by the map class, the keys must be of a consistent type and be comparable. The children’s argument must be a mapped map such as LinkedShape, the order of the keys will determine the order of the widgets in the fragmented control.   When the status of the fragmented control changes, the widget calls the onValueChanged callback. The map key associated with the newly selected widget is returned in the onValueChanged callback. Typically, flutter cupertino widgets that use fragmented controls will listen for onValueChanged callbacks and rebuild fragmented controls with a new GroupValue to update the currently selected option.   Children will be displayed in the order of keys in the map. The height of the section control is determined by the height of the tallest widget provided as a value in the children’s map. The width of each child in the segment control will be equal to the width of the wider child, as long as the combined width of the children is wider than the available horizontal space. In this case, the available horizontal space is divided by the number of children provided to determine the width of each widget. The selection area for each widget in the children’s map will be expanded to fill the count space, so the same dimensions will appear in each widget.     A segmented control can be optionally created with optional colors. The thumbColor, backgroundColor arguments can be used to override the colors of a fragmented control by its control.  

CupertinoSwitch

Used to turn on / off state of single setting. The switch itself does not maintain any state. Instead, when the switch status changes, the widget calls the On Calling callback. Most of the flutter cupertino widgets that use the switch will listen for onChanged callbacks and rebuild the switch with a new value to update the view format of the switch.

CupertinoTabBar

With one tab activated, the bottom displays several tabs using non-innovation, the first tab by default.   This statelessWidget does not store the active tab itself. You should listen to the on-call callback and call to reflect the setstate with the new currentIndex for the new selection. This can also be done automatically by wrapping it with a CupertinoTabScaffold.   Tab changes typically trigger a switch between navigator s, each with its own navigation stack according to the standard iOS design. This can be done using the CupertinoTabView s inside each tab builder in CupertinoTabScaffold.   If the opacity of a given backgroundColor is not 1.0 (which is the case by default), it will create a blur effect for the material behind it.   When used as CupertinoTabScaffold.tabBar, by default its text scale factor in CupertinoTabBar is set to 1.0 and it does not respond to text scale factor changes from the operating system to match the original iOS behavior. To override this behavior, wrap the components of each navigationBar inside MediaQuery with the desired MediaQueryData.textScaleFactor value. Text scale factor values ​​can be retrieved from the operating system in many ways, such as querying MediaQuery.textScaleFactorOf against CupertinoApp’s BuildContext.  

CupertinoTabScaffold

IOS tabulates the application’s root layout and behavior structure.   The scaffold lays out the contents between the bottom bar and the tab bar or behind.   A tabBar and a tabBuilder are required. CupertinoTabScaffold will listen to the tap callback of CupertinoTabBar provided automatically to change the active tab.   A controller can be used to provide an initially selected tab index and to manage subsequent tab changes. If no controller is specified, the scaffold will create its own Cupertino tab controller and manage it internally. Otherwise it is up to the owner of the controller to finish it after using it.   The contents of the tab are created with the tabBuilder given in the active tab index.  The tabBuilder should be able to create as many pages as tabBar.items. Inactive tabs will be disabled offstage and their animations.   Adding / deleting tabs or reordering tabs is supported but not recommended. Doing so is against iOS human interface guidelines, and CupertinoTabScaffold may lose some tab state in the process.   Use CupertinoTabView as the root widget of each tab to support tabs with parallel navigation state and history. As each CupertinoTabView has a navigator, the CupertinoTabView reconstructs the CupertinoTabView with a separate widget. After updating the contents of CupertinoTabView after its creation, trigger a rebuild (State.setState, for example) from its descent instead of its ancestor.  

CupertinoTabView

A single tab view with its own navigator state and history.   A specific tab view used as the content of each tab in the CupertinoTabScaffold where multiple tabs can coexist with parallel navigation states and history.   CupertinoTabView configures the top-level navigator to search for routes in the following order:      

1. For the / route, the builder property, if non-zero, is used.
2. Otherwise, the root table is used, if it contains an entry for the root, including / if the builder is not specified.
3. Otherwise, onGenerateRoute is called, if provided. This should return a non-zero value for any valid route that is not controlled by the builder and routes.
4. In the end if all else fails then unintentional is called.

  These navigational properties are not shared with any sibling cupertinotabview nor are examples of any ancestor or descendant navigator.     Navigator.of (rootNavigator: true), to push a root above this CupertinoTabView rather than inside (such as when showing the dialog at the top of all tabs).  

CupertinoTextField

A text field allows the user to enter text, either with a hardware keyboard or with an onscreen keyboard.   This widget matches both UITextField and an editable UITextView on iOS.   Whenever the user changes the text in the field, the text field calls the On Calling callback. If the user indicates that they have been typed in the field (eg, pressing a button on a soft keyboard), the text field says an onbus callback.  

CupertinoTimerPicker

This picker shows the duration of the countdown with hours, minutes and other spinners. The duration is between 0 and 23 hours 59 minutes 59 seconds.

There are several methods of timer picker listed in CupertinoTimerPickerMode.

The logical pixel has a fixed size of 320 x 216, which is 330 x 216, with the exception of the Picker’s Cupertino TimmerMaker decode.hums. If the parent gives the widget more space than it needs, the picker will position it according to its alignment property.