If you have not yet started with Flutter and want to understand the root basics first then you can read through my previous article,

https://medium.com/@yuvrajpandey24/getting-started-with-flutter-192c19940f34.

A material design “Raised button”.

A Raised button is based on a Material widget whose Material.elevation increases when the button is pressed.

Use raised buttons to add dimension to otherwise mostly flat layouts, e.g. in long busy lists of content, or in wide spaces. Avoid using raised buttons on already-raised content such as dialogs or cards.

A Material Design raised button consists of a rectangular piece of material that hovers over the interface.

The RaisedButton has a single constructor that allows us to instantiate the widget with a number of different properties as follows:

const RaisedButton({

Key key,

@required this.onPressed,

this.color,

this.highlightColor,

this.splashColor,

this.disabledColor,

this.elevation: 2.0,

this.highlightElevation: 8.0,

this.disabledElevation: 0.0,

this.colorBrightness,

this.child

}) : super(key: key);

The properties above are used to declare the following:

color — This is the color used for the background color of the button while it is in it’s default, unpressed state.

— This is the color used for the background color of the button while it is in it’s default, unpressed state. disabledColor — This is the color used for the button when it is in it’s disabled state.

— This is the color used for the button when it is in it’s disabled state. disabledElevation — This is the float value used for the elevation of the button when it is in it’s disabled state.

— This is the float value used for the elevation of the button when it is in it’s disabled state. elevation — This is the float value used for the elevation of the button when it is in it’s default state.

— This is the float value used for the elevation of the button when it is in it’s default state. enabled — This declares whether or not the button is currently enabled.

— This declares whether or not the button is currently enabled. highlightColor — This is the secondary color of the button when it is in a pressed state.

— This is the secondary color of the button when it is in a pressed state. highlightElevation — This is the float value used for the elevation of the button when it is in a pressed state.

— This is the float value used for the elevation of the button when it is in a pressed state. onPressed — This is the callback used to receive events when the button is pressed.

— This is the callback used to receive events when the button is pressed. splashColor — This is the primary color used for the button when it is in a pressed state.

The RaisedButton element needs to be used under the MaterialApp, so you will create the MaterialApp and then push the RaisedButton element to the MaterialApp’s home property.

RaisedButton can set onPressed property, specify the action to be triggered when the button is pressed, color property can set the color of the button, child property is the label on the set button. The highlightColor property sets the color of the button press.

Consider a basic sample below with Add & Subtract button whose onPressed event changes the count of number on screen,