Create Flutter Components

Creating Flutter components with examples

Creating Flutter components is almost the same with creating an iOS component. Here is an example of how to create a button. For more detail, click here to see how to create iOS components.

What is Material Button?

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

You can create TextButton, IconButton, ElevatedButton, and OutlinedButton from the MaterialButton class with Monday Hero.

Different Types of Material Buttons in Flutter

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

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

• ElevatedButton is a label displayed with an elevation. It is suitable for adding dimension to mostly flat layouts like long busy lists of content or wide spaces.

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

What is Cupertino Button?

Cupertino Button implements the current iOS design language based on Apple's Human Interface Guidelines. It takes in a text or an icon that fades out and in with touch.

Unlike Material Button, which used in applications developed on both iOS and Android platforms, Cupertino Button is used on the iOS platform only. While Material Button has a specific style that feels similar across all platforms, Cupertino Button has the standard iOS-styled app feeling.

You can create both Material Button and Cupertino Button by using Monday Hero.

Creating A Button

Here is an example of creating an ElevatedButton.

Click the 'Button' option from the 'Components' menu at the left of the screen. Choose the 'Create New Instance' option from the drop-down menu.

Creating A Button

Select the items to define the button's fields. Monday Hero automatically identifies selected areas and defines the properties of a button. Click 'Finish'.

Selecting items and defining fields

Optionally, you can right-click on the items after selecting them to define the button's fields.

Select the items and right-click on them to create a new component.

Monday Hero Elevated Button Code

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