Monday Hero
Website
V2
V2
  • Overview
  • Workflow Basics
  • Getting Started
    • Installing the Desktop App
    • Log In & Create a Project
    • Prepare Design to Get the Best Code Results
    • Import Design Files into Monday Hero
      • Import Figma Design Files into Monday Hero
        • Import Your Figma Text Style and Color Library
      • Import Adobe XD Design Files into Monday Hero
      • Import Sketch Design Files Into Monday Hero
    • Share Your Project & Manage Roles
  • DESIGN TO FLUTTER
    • Convert Design to Flutter
    • Create Flutter Components
      • System Components
        • Material & Cupertino Components
        • Flutter Supported Components
      • Custom Components
    • Create Responsive Code
    • Colors
    • Text Styles
    • Assets
    • Sync Code
    • Flutter Project Base
      • Fast Start with Monday Hero Starter Project
      • Integrate Monday Hero to your Existing Project
    • Shadows, Gradients, and Other Design Elements
    • Troubleshooting Guide
      • Checklist for Design Element Review and Code Generation
      • Github Monday Hero Starter Project Troubleshooting
  • DESIGN TO SWIFT
    • Convert Design to Swift
    • Create Swift Components
      • System Components
        • Views
        • Texts
        • Images
        • Button
        • TextField/EditText
        • Text Area
        • Status Bar
        • Search Bar
        • List
        • Grid
        • Swift Supported Components
      • Custom Components
      • Video Player Code Component
    • Colors
    • Text Styles
    • Assets
    • Shadows, Gradients, and Other Design Elements
    • Firebase
      • How to get Video URL from Firebase
    • Export Code
      • Integrating Exported Files into an Existing Xcode Project
  • Hero AI Assistant
    • Hero AI Assistant
  • Design to React
    • Convert Design to React
  • Step-By-Step Tutorials
    • 🏖️Travel App
  • Support
    • Roadmap
    • Suggest a New Feature
    • Report a Bug
    • Product Announcements
    • Mail to Support
    • Frequently Asked Questions
  • Join & Follow Us
    • YouTube
    • Discord Community
    • GitHub
    • Twitter
    • LinkedIn
    • Blog
    • Instagram
    • Facebook
Powered by GitBook
On this page

Was this helpful?

  1. DESIGN TO FLUTTER
  2. Create Flutter Components
  3. System Components

Material & Cupertino Components

Choosing Between Material and Cupertino Components in Flutter

PreviousSystem ComponentsNextFlutter Supported Components

Last updated 1 year ago

Was this helpful?

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.

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.

Monday Hero Elevated Button Code Result

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: appColors.cerulean,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(8)),
    ),
    alignment: Alignment.centerLeft,
  )
Different Types of Material Buttons in Flutter
Selecting items and defining fields