Flutter: RaisedButton widget

In this post, we’ll see how to create a Button using the RaisedButton widget in Flutter.

Flutter RaisedButton class

The RaisedButton class allows you to create a button based on the Material design. The widget has a constructor that accepts the following properties.

PROPERTY DESCRIPTION
colorDefines the color used as the background color of the button when it is not pressed or disabled.
textColorColor of the text that appears on the button.
elevationA floating value that defines the elevation of the button.
splashColorSplash indicates that the button is touched and splashColor indicates the color of the button when it is touched.
highlightColorThe color of the button when it is pressed.
shapeDefines the shape of the button.
colorBrightnessDefines the brightness of the button.
paddingA floating value that defines padding for the child of the button.
disabledTextColorColor of the text when the button is disabled.
disabledColorColor of the button when it is disabled.

Creating a RaisedButton

To create a simple RaisedButton, add the following code to main.dart.

You might have noticed the button is disabled. Also, the color property that we have provided is not applied. This is because we have not provided the callback method for the onPressed event of the button. You can add a callback function as shown below.

Customizing RaisedButton

The RaisedButton we’ve created is a basic one. We can further customize the button by changing it’s color, background color, margin, padding, text size, etc. Here’s an example.

The following example creates a RaisedButton with LinearGradient background.

raised button with linear gradient background

Improving code

The above-defined methods allow only to define simple onPressed() callback methods. Also, the code will become more complex if you want to write code for some complex operations. So, if you want to get more control over the code and improve code readability, modify it as shown below.

If you enjoyed this post, let me know by leaving a comment below.


Leave a Reply

Your email address will not be published.Required fields are marked *