RaisedButton is one of the most widely used widget in the flutter material library. It is actually a simple button which can handle normal click event. But what make it so great is its easiness of development. Lets look into the basic RaisedButton:
new RaisedButton( onPressed: () => print("Button Pressed"), child: new Text("Press here"),),
The onPressed will get called when you click the button and you will get a console output ‘Button Pressed’.
Let’s color it:
Add a new parameter color to the RaisedButton Widget:
new RaisedButton( color: Colors.greenAccent, onPressed: () => print("Button Pressed"), child: new Text("Press here"),)
There are other coloring arguments to RaisedButton. They are focusColor, highlightColor and hoverColor.
Let’s see how would it look like if onPressed is null. It would look like
This button is disabled. We can change the color of the button and its text while disabled using
disabledColor: Colors.greenAccent,disabledTextColor: Colors.blue,
The elevation will give a feeling of rise from its background.
There are three more elevations parameters too. focusElevation, highlightElevation and hoverElevation . They will give an elevation when the button is focused using autoFocus or a focusNode when the button is highlighted and when we hover over the button respectively.
We can set a splash color when the button is pressed
You can set the animation duration of Raised button using:
animationDuration: Duration(seconds: 2),
This will be helpful when elevation changes from on to another such as focused mode to non-focused, etc.
Another one is the colorBrightness. It has two options dark and light.
colorBrightness: Brightness.light,orcolorBrightness: Brightness.dark,
We can change the shape of the RaisedButton. For an example, we use RoundedRectangleBorder
shape: RoundedRectangleBorder( borderRadius: new BorderRadius.circular(18.0), side: BorderSide(color: Colors.black),)
onHighlightChanged callback: Triggered when pressed or released the RaisedButton.
onHighlightChanged: (boolValue) => print(boolValue),
//returns true when pressed the button, false when released
padding: Padding is used to set the distance between sides of the RaisedButton and it’s child.
padding: EdgeInsets.only(top: 20.0),//distance of top to the child
padding: EdgeInsets.all(20.0),//distance of all the sides to the //child
Hope you enjoy the article. Will come back with another interesting widget. Feel free to ask if you have any doubts.