A brief explanation of Flutter's Button (basic component)

A brief explanation of Flutter's Button (basic component)

Material Widget Library provides a variety of Widget, such as buttons RaisedButton, FlatButton, OutlineButtonetc., which are directly or indirectly RawMaterialButtonpackaged customizable, so most of them attributes and RawMaterialButtonthe 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 onPressedattribute 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

RaisedButtonThe "floating" button, which has a shadow and a gray background by default. After pressing, the shadow will become larger, such as:

It RasiedButtonis very simple to use , such as:

RaisedButton(
  child: Text("normal"),
  onPressed: () => {},
);

FlatButton

FlatButtonThat is, the flat button, the default background is transparent without shadow. After pressing, there will be a background color:

FlatButtonIt is also very simple to use , the code is as follows:

FlatButton(
  child: Text("normal"),
  onPressed: () => {},
)

OutlineButton

OutlineButtonThere 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:

OutlineButtonIt is also very simple to use , the code is as follows:

OutlineButton(
  child: Text("normal"),
  onPressed: () => {},
)

IconButton

IconButtonIt 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, OutlineButtonHas a iconconstructor, 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 FlatButtonan 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 shapeto specify its shape as a rounded rectangle. Because the button background is blue (dark), you need to specify the button topic colorBrightnessis 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.bluereplaced 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 FlatButtonchange RaisedButtonthe 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 RaisedButtonthere 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 elevationrelated 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.