Back to results for “Fundamentals”
Flutter › Flutter Cupertino (iOS Style) Widgets

What are some of the specific Cupertino equivalents for commonly used Material widgets, such as buttons, text fields, and dialogs, and how do their specific visual styles typically differ from their Material counterparts?

Intermediate

Answer

Flutter's Cupertino library provides direct iOS styled equivalents for most of the commonly used Material widgets, including CupertinoButton, which typically appears with minimal or no visible background by default rather than Material's more filled in raised appearance, CupertinoTextField, which uses a subtly different border and padding style, and CupertinoAlertDialog, which displays with iOS's own distinctive rounded corners and characteristic stacked action button layout, and becoming genuinely familiar with these specific common equivalents makes it noticeably easier to correctly translate an existing Material based design over into an appropriately native feeling iOS specific interface.
CupertinoButton(
  child: Text('Continue'),
  onPressed: () {},
)

CupertinoAlertDialog(
  title: Text('Confirm'),
  content: Text('Are you sure?'),
  actions: [CupertinoDialogAction(child: Text('OK'), onPressed: () {})],
)
Real-world example A checkout confirmation screen uses CupertinoAlertDialog specifically on iOS to display a purchase confirmation prompt, correctly matching the exact same distinctive rounded, stacked button style an iOS user would already genuinely and immediately recognize from countless other native iOS apps.

Common follow-ups: Is there a Cupertino equivalent specifically for Material's own floating action button?;How do you properly customize the specific colors used within Cupertino widgets to actually match your own app's particular brand identity?