Material & Cupertino Components

Choosing Between Material and Cupertino Components in Flutter

Choosing Between Material and Cupertino Components in Flutter

When developing apps in Flutter, designers and developers often face the decision of styling their user interfaces to resemble either an iOS or Android app. This choice is determined by the selection of components—Material or Cupertino—used within the app. Material components adhere to Google's Material Design guidelines, offering a design language commonly associated with Android apps. Conversely, Cupertino components emulate the visual style of iOS apps, aligning closely with Apple's design principles. With Monday Hero, you can create both Material and Cupertino components.

Material Button Example

A Material Button is a set of buttons that lead users to take action and make choices. Unlike other buttons, it is created according to Material design rules by Google to help teams build high-quality digital experiences.

With Monday Hero, you can create TextButton, IconButton, ElevatedButton, and OutlinedButton from the MaterialButton class.

• ElevatedButton features a label displayed with elevation, making it suitable for adding dimension to mostly flat layouts, such as long, busy lists of content or wide spaces.

• OutlinedButton is a label displayed with a stroke but without elevation. It is used for actions that are important but not primary.

• TextButton is clickable text used on toolbars, in dialogs, or inline with other content for less important actions.

• IconButton is a graphic button filled with color, commonly used in app bars and for in-app actions.

Different Types of Material Buttons in Flutter

Cupertino Button Example

A Cupertino Button implements the current iOS design language, which is based on Apple's Human Interface Guidelines. It can display either text or an icon, both of which fade in and out upon touch. Unlike Material Buttons, which are used in applications developed for both iOS and Android platforms, the Cupertino Button is exclusively used on the iOS platform. While Material Buttons maintain a consistent style across all platforms, Cupertino Buttons preserve the distinctive iOS-styled app aesthetic.

Material UI Elevated Button Example

To use the Material UI style buttons, simply select 'Button' instead of looking for 'Material UI Button'. Monday Hero will automatically determine whether it's an ElevatedButton, OutlinedButton, or another type of button. Here is an example of how to create an ElevatedButton:

Highlight the layers you wish to convert into a component and select the 'Create New Instance of a Button' option.

Select the items to define the button's properties. Monday Hero automatically identifies the selected areas and assigns the properties to the button. Click 'Finish' to complete the process.

Selecting items and defining fields

Monday Hero Elevated Button Code Result

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: appColors.cerulean,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(8)),
    ),
    alignment: Alignment.centerLeft,
  )