[Flutter 1-17] Flutter hands-on tutorial UI controls-[multi-image warning] RaisedButton

Author | Vlad
Source | Vlad (Public Account: fulade_me)

Material style, there are three commonly used buttons RaiseButton, FlatButton, OutlineButton.
These three buttons are inherited MaterialButton, and MaterialButtonthey inherit from StatelessWidget.

RaiseButton: A button with a shadow effect, with a gray background by default, and clicking it down will have a click effect and shadow.
FlatButton: Flat style button, click on it will have background color.
OutlineButton: A button with a border, and the border changes color when clicked.

1. RaisedButton

Let's look RaisedButtonat the construction method first

  const RaisedButton({
    Key key,
    /// 点击后的回调方法
    @required VoidCallback onPressed,
    /// 长按后的回调方法
    VoidCallback onLongPress,
    /// 高亮时候的回调方法
    ValueChanged<bool> onHighlightChanged,
    /// 鼠标指针的光标进入或悬停在此按钮(这个用于Web端或PC端)
    MouseCursor mouseCursor,
    /// 文本的主题，这个跟MaterialApp的属性theme有关
    ButtonTextTheme textTheme,
    /// 文本颜色
    Color textColor,
    /// 不可点击时的文本颜色
    Color disabledTextColor,
    /// 背景颜色
    Color color,
    /// 可点击时的背景颜色
    Color disabledColor,
    /// 获取焦点时的颜色(用于Web端或PC端)
    Color focusColor,
    /// 指鼠标悬停时的颜色(用于Web端或PC端)
    Color hoverColor,
    /// 高亮时的颜色
    Color highlightColor,
    /// 水波纹颜色，按下松开会有水波纹效果
    Color splashColor,
    /// 按钮主题颜色，默认浅色
    Brightness colorBrightness,
    /// 默认时的 阴影大小
    double elevation,
    /// 选中时的 阴影大小
    double focusElevation,
    /// 指鼠标悬停时的阴影大小
    double hoverElevation,
    /// 高亮时的阴影大小
    double highlightElevation,
    /// 不可选中时的阴影大小
    double disabledElevation,
    /// 内边距 跟布局有关
    EdgeInsetsGeometry padding,
    VisualDensity visualDensity,
    /// 设置按钮的形状
    ShapeBorder shape,
    /// 切边的样式
    Clip clipBehavior = Clip.none,
    FocusNode focusNode,
    bool autofocus = false,
    MaterialTapTargetSize materialTapTargetSize,
    /// 动画的时间
    Duration animationDuration,
    /// 子控件
    Widget child,
  }) 

1.1 One of the simplest RaisedButton

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

effect:

1.2 Unclickable state

RaisedButton(
    child: Text("不设置onPressed"),
    disabledColor: Colors.blue,
    disabledTextColor: Colors.red,
);

If you do not set the onPressedparameters, the default is not clickable, of course we can still set the text color and background color when it is not clickable. Note that it onPressedis a @requiredparameter, it is not recommended not to pass this parameter.

1.3 Text color

RaisedButton(
    child: Text("textColor红色"),
    textColor: Colors.red,
    onPressed: () {},
);

textColorYou can set the color of the text.

1.4 Set shape

RaisedButton(
    onPressed: () {},
    child: Text("椭圆形"),
    shape: StadiumBorder(),
);

shapeThe shape of the button can be set through parameters. Common shapes are RoundedRectangleBorderrectangle, CircleBordercircle, StadiumBorderellipse, BeveledRectangleBorderand octagon.

1.5 Background color

RaisedButton(
    child: Text("背景颜色"),
    color: Colors.red,
    onPressed: () {},
);

colorThe background color of the button can be set by passing in .

1.6 Highlight colors

RaisedButton(
    onPressed: () {},
    child: Text("高亮红色"),
    highlightColor: Colors.red,
);

Pass in highlightColorparameters to set the color when selected.

1.7 Water ripple red

RaisedButton(
    onPressed: () {},
    child: Text("水波纹红色"),
    splashColor: Colors.red,
);

splashColorCan help us set the color of the water ripple after clicking.

1.8 Highlight callback

RaisedButton(
    child: Text("高亮变化回调"),
    onPressed: () {},
    onHighlightChanged: (value) {
        print("高亮切换");
    },
);

onHighlightChangedYou can receive a callback method, which will be called back when the button is pressed and highlighted.
1.9 Long press callback

RaisedButton(
    child: Text("长按回调"),
    onPressed: () {},
    onLongPress: () {
        print("长按回调");
    },
);

onLongPressYou can receive a long press callback method, which will be called back when the button is long pressed.

1.10 Set the size of the shadow

RaisedButton(
    child: Text("阴影设置20"),
    onPressed: () {},
    elevation: 20.0,
);

elevationThe parameter can set the size of the shadow, the default shadow is relatively small, you can set a larger shadow size through this parameter.

If you want to experience the running effect of the above code, you can go to my Github warehouse project flutter_app-> lib-> routes-> flat_button_page.dart, you can download it and run it and experience it.

2. FlatButton

FlatButtonThe constructor parameters RaisedButtonare basically the same as the parameters, and the setting method is the same.

  const FlatButton({
    Key key,
    /// 点击后的回调
    @required VoidCallback onPressed,
    /// 长按后的回调
    VoidCallback onLongPress,
    /// 点击 高亮后的回调
    ValueChanged<bool> onHighlightChanged,
    /// 鼠标指针的光标进入或悬停在此按钮(这个用于Web端或PC端)
    MouseCursor mouseCursor,
    /// 文本的主题，这个跟MaterialApp的属性theme有关
    ButtonTextTheme textTheme,
    /// 文字颜色
    Color textColor,
    /// 不可点击时的文本颜色
    Color disabledTextColor,
    /// 背景颜色
    Color color,
    /// 不可点击时的背景颜色
    Color disabledColor,
    /// 获取焦点时的颜色(用于Web端或PC端)
    Color focusColor,
    /// 指鼠标悬停时的颜色(用于Web端或PC端)
    Color hoverColor,
    /// 高亮时的颜色
    Color highlightColor,
    /// 水波纹颜色，按下松开会有水波纹效果
    Color splashColor,
    /// 按钮主题颜色，默认浅色
    Brightness colorBrightness,
    /// 内边距 跟布局有关
    EdgeInsetsGeometry padding,
    VisualDensity visualDensity,
    /// 按钮的形状
    ShapeBorder shape,
    /// 切边的样式
    Clip clipBehavior = Clip.none,
    FocusNode focusNode,
    bool autofocus = false,
    MaterialTapTargetSize materialTapTargetSize,
    /// 子控件
    @required Widget child,
  })

2.1 One of the simplest FlatButton

FlatButton(
    child: Text("FlatButton"),
    onPressed: () {},
);

We can see that in contrast RaisedButton, the FlatButtondefault flat style.

2.2 Setting the shape

FlatButton(
    onPressed: () {},   
    child: Text("椭圆形"),
    shape: StadiumBorder(),
);

The shape shapecan be set by passing in parameters FlatButton. It should be noted that: the set shape can only be seen when you click it down.

Other non-click the status, text color, background color, highlight color, red water ripples, highlight correction, press callback setup code and other states with RaisedButtonthe same set up.

If you want to experience FlatButtonthe running effect, you can go to my Github repository project flutter_app-> lib-> routes-> flat_button_page.dart, you can download it and run it and experience it.

3. OutlineButton

Let's look OutlineButtonat the constructor

const OutlineButton({
    Key key,
    /// 点击后的回调
    @required VoidCallback onPressed,
    /// 长按后的回调
    VoidCallback onLongPress,
    /// 鼠标指针的光标进入或悬停在此按钮(这个用于Web端或PC端)
    MouseCursor mouseCursor,
    /// 文本的主题，这个跟MaterialApp的属性theme有关
    ButtonTextTheme textTheme,
    /// 文字颜色
    Color textColor,
    /// 不可点击时的文本颜色
    Color disabledTextColor,
    /// 背景颜色
    Color color,
    /// 获取焦点时的颜色(用于Web端或PC端)
    Color focusColor,
    /// 指鼠标悬停时的颜色(用于Web端或PC端)
    Color hoverColor,
    /// 高亮时的颜色
    Color highlightColor,
    /// 水波纹颜色，按下松开会有水波纹效果
    Color splashColor,
     /// 高亮时的阴影大小
    double highlightElevation,
    /// 边框的延时
    this.borderSide,
    /// 不可用时 边框的颜色
    this.disabledBorderColor,
    /// 选中时边框的样色
    this.highlightedBorderColor,
    /// 内边距 跟布局有关
    EdgeInsetsGeometry padding,
    VisualDensity visualDensity,
    /// 按钮的形状
    ShapeBorder shape,
    /// 切边的样式
    Clip clipBehavior = Clip.none,
    FocusNode focusNode,
    bool autofocus = false,
    /// 子控件
    Widget child,
  })

3.1 Simple OutlineButton

OutlineButton(
    onPressed: () {},
    child: Text("OutlineButton"),
);

Its border is gray by default, and it turns blue when you click to select it.

3.2 Border style

OutlineButton(
    child: Text("Border颜色"),
    borderSide: BorderSide(color: Colors.red, width: 2),
    highlightColor: Colors.yellow,
    highlightedBorderColor: Colors.green,
    onPressed: () {},
);

borderSideCan receive an BorderSideobject, the object can set the color and width, and we can also set the selected background color and the selected border color by setting highlightColorand highlightedBorderColor.

Other non-click the status, text color, highlight color, red water ripples, highlight correction, press callback and other states set the code with RaisedButtonthe same set up.

If you want to experience FlatButtonthe running effect, you can go to my Github repository project flutter_app-> lib-> routes-> outline_button_page.dart, you can download it and run it and experience it.

4. IconButton

4.1 Simple IconButton

IconButton(
    icon: Icon(Icons.local_taxi),
    onPressed: () {},
);

IconButtonYou can receive Iconthe parameters of a class. Flutter comes with a lot of Icondetails, see here
4.1 IconButton with selected prompt

IconButton(
    icon: Icon(Icons.local_cafe),
    tooltip: "Cafe Button",
    color: Colors.red,
    onPressed: () {},
);

By setting tooltipproperties, you can set the pop-up prompt text when the button is pressed. Cafe ButtonThe text we set here .

4.2 IconButton for custom pictures

IconButton(
    icon: Image.asset("images/flutter_icon_100.png"),
    onPressed: () {},
);

We can also provide a Imagetype Icon, so that we can set different picture buttons.
As shown below:

If you want to experience IconButtonthe running effect, you can go to my Github repository project flutter_app-> lib-> routes-> icon_button_page.dart, you can download it and run it and experience it.

The above is the Material style button and detailed explanation. If you want to know the Cupertino style button, you can click here .
In most of our daily development, we will use Material style styles.

---