????????Material widget標(biāo)準(zhǔn)庫中為我們提供了多種式樣的Button Widget,RaisedButton, FlatButton,OutlineButton等,他們都是對RawMaterialButton的二次封裝,繼承了RawMaterialButton的屬性和方法,所以MaterailButton都有一些共同特點(diǎn):
按下的時(shí)候都有水波動(dòng)畫效果;
有一個(gè)onPressd屬性來設(shè)置回調(diào)方法,如果不設(shè)置這個(gè)回調(diào)方法,則按鈕不可交互,也就變成了"Text".

RaisedButton

RaisedButton 是帶有一定圓角和陰影以及灰色背景的按鈕,并且在點(diǎn)擊的時(shí)候會(huì)有動(dòng)畫效果,其接口:

const RaisedButton({
    Key key,
    @required VoidCallback onPressed,//回調(diào)函數(shù)
    ValueChanged<bool> onHighlightChanged,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    double elevation,
    double focusElevation,
    double hoverElevation,
    double highlightElevation,
    double disabledElevation,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior,
    FocusNode focusNode,
    MaterialTapTargetSize materialTapTargetSize,
    Duration animationDuration,
    Widget child,
  }) 

基本用法:

RaisedButton(
              child: Text("RaisedButton",
                style: TextStyle(color: isTouchRaisedButton ? Colors.orange : Colors.red),
              ),
              highlightColor: Colors.yellow,
              
              textTheme: ButtonTextTheme.accent,
              onPressed: _raisedButtonAction,
            ),

FlatButton

FlatButton默認(rèn)沒有背景色并且也不帶陰影,高亮狀態(tài)會(huì)有陰影,其主要接口:

const FlatButton({
    Key key,
    @required VoidCallback onPressed,
    ValueChanged<bool> onHighlightChanged,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    Brightness colorBrightness,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior,
    FocusNode focusNode,
    MaterialTapTargetSize materialTapTargetSize,
    @required Widget child,
  }) 

基本用法:

FlatButton(
            child: Text("FlatButton",
              style: TextStyle(color: isTouchRaisedButton ? Colors.orange : Colors.red),

            ),
            onPressed: _FlatButtonAction,
          ),

OutlineButton

OutlineButton是帶有邊框的按鈕,其接口:

const OutlineButton({
    Key key,
    @required VoidCallback onPressed,
    ButtonTextTheme textTheme,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color focusColor,
    Color hoverColor,
    Color highlightColor,
    Color splashColor,
    double highlightElevation,
    this.borderSide,
    this.disabledBorderColor,
    this.highlightedBorderColor,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
    Clip clipBehavior,
    FocusNode focusNode,
    Widget child,
  })

基本用法:

OutlineButton(
            child: Text("OutlineButton",
              style: TextStyle(color: isTouchRaisedButton ? Colors.orange : Colors.red),
            ),
            onPressed: _OutlineButtonAction,
            highlightedBorderColor: Colors.red,
          )

IconButton

IconButton默認(rèn)沒有背景,點(diǎn)擊有有背景色,其有一個(gè)icon屬性,主要接口:

IconButton(
            icon: Icon(Icons.today),
            onPressed: _IconButtonAction,
            highlightColor: Colors.red,
          ),

button use