# Material & Cupertino Components

### 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.

<div data-full-width="true"><img src="/files/SJWJUUtVUfOu4lPh4oZt" alt="Different Types of Material Buttons in Flutter"></div>

#### 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.

![](/files/3EYUF4eZVPrUhxcWYRoj)

**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.

<figure><img src="/files/K7gMlCdN5TB1KVacvoNo" alt=""><figcaption></figcaption></figure>

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](/files/VRj1ly6K4GMqSQobVRmJ)

#### Monday Hero Elevated Button Code Result

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.mondayhero.io/design-to-flutter/creating-components/system-components/material-and-cupertino-components.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.