Material Widget Library provides a variety of Widget, such as buttons RaisedButton
, FlatButton
, OutlineButton
etc., which are directly or indirectly RawMaterialButton
packaged customizable, so most of them attributes and RawMaterialButton
the same.
When introducing each button, we first introduce its default appearance, and most of the appearance of the button can be customized by attributes. In addition, all the buttons in the Material library have the following similarities:
- When you press it, there will be "water wave animation" (also known as "rippling animation, which is the animation of water waves rippling on the button when you click it").
- There is an
onPressed
attribute to set the click callback, which will be executed when the button is pressed. If the callback is not provided, the button will be in a disabled state, and the disabled state will not respond to user clicks.
RaisedButton
RaisedButton
The "floating" button, which has a shadow and a gray background by default. After pressing, the shadow will become larger, such as:
It RasiedButton
is very simple to use , such as:
RaisedButton(
child: Text("normal"),
onPressed: () => {},
);
FlatButton
FlatButton
That is, the flat button, the default background is transparent without shadow. After pressing, there will be a background color:
FlatButton
It is also very simple to use , the code is as follows:
FlatButton(
child: Text("normal"),
onPressed: () => {},
)
OutlineButton
OutlineButton
There is a border by default, no shadow and transparent background. After pressing, the border color will become brighter, and the background and shadow (weaker) will appear at the same time:
OutlineButton
It is also very simple to use , the code is as follows:
OutlineButton(
child: Text("normal"),
onPressed: () => {},
)
IconButton
IconButton
It is a clickable Icon, does not include text, there is no background by default, and the background appears after clicking:
code show as below:
IconButton(
icon: Icon(Icons.thumb_up),
onPressed: () => {},
)
Button with icon and text
RaisedButton
, FlatButton
, OutlineButton
Has a icon
constructor, you can easily create a button with an icon through it:
code show as below:
RaisedButton.icon(
icon: Icon(Icons.send),
label: Text(" "),
onPressed: (){},
),
OutlineButton.icon(
icon: Icon(Icons.add),
label: Text(" "),
onPressed: (){},
),
FlatButton.icon(
icon: Icon(Icons.info),
label: Text(" "),
onPressed: (){},
)
Custom button appearance
The appearance of the button can be defined by its properties. Different button properties are similar. Let's take FlatButton
an example to introduce the common button properties. For detailed information, please refer to the API documentation.
const FlatButton({
...
@required this.onPressed,//
this.textColor,//
this.disabledTextColor,//
this.color,//
this.disabledColor,//
this.highlightColor,//
this.splashColor,//
this.colorBrightness,//
this.padding,//
this.shape,//
@required this.child,//
})
Most of the attribute names are self-explanatory, so I won t repeat them here. Let s take an example to see how to customize buttons.
Example
Define a button with a blue background and rounded corners on both sides, the effect is as follows:
code show as below:
FlatButton(
color: Colors.blue,
highlightColor: Colors.blue[700],
colorBrightness: Brightness.dark,
splashColor: Colors.grey,
child: Text("Submit"),
shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
onPressed: () => {},
)
In the above code, it is mainly used shape
to specify its shape as a rounded rectangle. Because the button background is blue (dark), you need to specify the button topic colorBrightness
is Brightness.dark
, which is to ensure the button text color is light.
Flutter does not provide a setting to remove the background. If we need to remove the background, we can achieve it by setting the background color to fully transparent. Corresponding to the above code, it will be color: Colors.blue
replaced with color: Color(0x000000)
.
Attentive readers may find that this button has no shadow (neither after it is clicked), so it will appear untextured. If you want the button to be shaded, you only need to FlatButton
change RaisedButton
the line in the above code, and the other code does not need to be changed (the color is not changed here). After the change, let's see the effect:
Does it have a texture! The reason for this is that RaisedButton
there is a default shadow configuration:
const RaisedButton({
...
this.elevation = 2.0,//
this.highlightElevation = 8.0,//
this.disabledElevation = 0.0,//
...
}
It is worth noting that in the Material Widget library, we will see elevation
related attributes in many Widgets , which are used to control shadows. This is because shadows are a very important form of expression in the Material design style.