1.繼承關係

Object > Diagnosticable > DiagnosticableTree > Widget > StatelessWidget > MaterialButton > RaisedButton、FlatButton、OutlineButton

2.介紹

RaisedButton	Material Design中的button，一個凸起的材質矩形按鈕。
FlatButton	Material Design中的button，一個沒有陰影的材質設計按鈕。
OutlineButton	Material Design中的button，RaisedButton和FlatButton之間的交叉：一個帶邊框的背景透明的按鈕，當按下按鈕時，其高度增加，背景變得不透明。

三個控件都繼承於MaterialButton，查看源碼會發現MaterialButton由RawMaterialButton（無主題Button）構建的。

而RawMaterialButton與CupertinoButton是一對button組合，都繼承於StatefulWidget，前者是google風格，後者IOS風格！

RaisedButton、FlatButton、OutlineButton、CupertinoButton四種button在文章後面給出效果及示例，不對參數詳解，主要對MaterialButton的創建及其參數詳解。

注意使用CupertionBUtton要導入庫：import 'package:flutter/cupertino.dart';

當然還有其他button:

IconButton比較簡單，用於創建僅包含圖標的按鈕，參數就不再講解；

以下後面文章會陸續詳解！

• DropdownButton，一個顯示可供選擇的選項的按鈕。

• FloatingActionButton，材質應用程序中的圓形按鈕。

• InkWell，實現平面按鈕的墨水飛濺部分。

後面文章會陸續詳解！

3.創建MaterialButton

  const MaterialButton({
    Key key,
    @required this.onPressed,
    this.onHighlightChanged,
    this.textTheme,
    this.textColor,
    this.disabledTextColor,
    this.color,
    this.disabledColor,
    this.highlightColor,
    this.splashColor,
    this.colorBrightness,
    this.elevation,
    this.highlightElevation,
    this.disabledElevation,
    this.padding,
    this.shape,
    this.clipBehavior = Clip.none,
    this.materialTapTargetSize,
    this.animationDuration,
    this.minWidth,
    this.height,
    this.child,
  }) : super(key: key);

4.參數詳解

4.1 VoidCallback onPressed

點擊激活按鈕時調用的方法

4.2ValueChanged<bool> onHighlightChanged

按下和擡起時都會調用的方法，詳看後面示例

4.3 ButtonTextTheme textTheme

定義按鈕的基色，以及按鈕的最小尺寸，內部填充和形狀的默認值。

默認爲ButtonTheme.of(context).textTheme。

也可以指定值：

enum ButtonTextTheme {
  normal,  // 按鈕文本爲黑色或白色，具體取決於ThemeData.brightness
  accent,  // 按鈕文本是ThemeData.accentColor
  primary,  // 按鈕文本基於ThemeData.primaryColor
}

4.4 Color textColor

按鈕文本的顏色

4.5 Color disabledTextColor

未設置按鈕點擊回調時使用的文本顏色

4.6 Color color

按鈕的填充顏色

4.7 Color disabledTextColor

未設置按鈕點擊回調時按鈕的填充顏色

4.8 Color highlightColor

按鈕被按下的填充顏色

4.9 Color splashColor

按鈕被按下的水波紋顏色，默認是有值的，不要要水波紋效果設置透明顏色即可！

4.10 colorBrightness

按鈕的主題亮度，當設置了textColor、color顏色，此值無效!

未設置了textColor、color顏色時：

enum Brightness {
  /// The color is dark and will require a light text color to achieve readable
  /// contrast. For example, the color might be dark grey, requiring white text.
  dark,
  /// The color is light and will require a dark text color to achieve readable
  /// contrast. For example, the color might be bright white, requiring black text.
  light,
}

4.11 double elevation、highlightElevation、disabledElevation

elevation	放置此按鈕的z座標。這可以控制凸起按鈕下方陰影的大小。
highlightElevation	設置了按鈕點擊回調時按鈕的陰影的大小
disabledElevation	未設置按鈕點擊回調時按鈕的陰影的大小

4.12 EdgeInsetsGeometry padding

《Flutter Container 參數詳解》 2.3節詳解過，略

4.13 ShapeBorder shape

按鈕形狀, 子類才起效果！

shape示例：

        統一四邊顏色和寬度
         shape: Border.all(color: Color(0xFF00FFFF),style: BorderStyle.solid,width: 2)
          // 四個邊分別指定顏色和寬度， 當只給bottom時與UnderlineInputBorder一致效果
//          shape: Border(top: b, bottom: b, right: b, left: b)
          // 底部線
//          shape: UnderlineInputBorder( borderSide:BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
          // 矩形邊色
//        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))
          // 圓形邊色
//        shape: CircleBorder(side: BorderSide(color: Color(0xFFFFFF00), style: BorderStyle.solid, width: 2))
          // 體育場（豎向橢圓）
//        shape: StadiumBorder(side: BorderSide(width: 2, style: BorderStyle.solid, color: Color(0xFF00FFFF))
          // 角形（八邊角）邊色
//          shape: BeveledRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(10)), side: BorderSide(color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2))

4.14 Clip clipBehavior

據此選項將剪裁（或不剪輯）內容。

值	內容	速度
Clip.antiAlias	剪輯具有抗鋸齒功能。此模式具有抗鋸齒裁剪邊緣，以實現更平滑的外觀。	中
Clip.antiAliasWithSaveLayer	在剪輯後立即剪輯具有抗鋸齒和saveLayer。此模式不僅具有抗鋸齒功能，還可以分配屏幕外緩衝區。所有後續塗料都在該緩衝液上進行，然後再進行修剪和合成。	慢
Clip.hardEdge	剪輯，但不應用抗鋸齒。此模式允許剪切，但曲線和非軸對齊的直線將呈鋸齒狀，因爲不會對抗鋸齒做出任何努力。	快
Clip.none	根本沒有剪輯。這是大多數小部件的默認選項：如果內容沒有溢出小部件邊界，則不需要爲剪輯支付任何性能成本。	-

4.15 MaterialTapTargetSize materialTapTargetSize

值

內容

MaterialTapTargetSize.

padded

最小點擊目標大小擴展到48px乘以48px。

MaterialTapTargetSize.

shrinkWrap

目標尺寸縮小到材料規格提供的最小值。

4.16 Duration animationDuration

定義 shape 和 elevation 的動畫更改的持續時間

4.17 double minWidth

控件最小寬度

4.18 double height

控件高度

4.19 Widget child

內容widget。

5.參考：

https://docs.flutter.io/flutter/material/MaterialButton-class.html

sdk源碼

6.效果及示例

代碼：

//  ---------------------------Button--------------------------------------------------
  Widget getButtons(BuildContext context) {
    return new Column(children: [
      SizedBox(height: 10),
      new Expanded(flex: 0, child: getMaterialButton(context)),
      SizedBox(height: 10),
      new Expanded(flex: 0, child: getRaisedButtonRow(context)),
      SizedBox(height: 10),
      new Expanded(flex: 0, child: getFlatButtonRow(context)),
      SizedBox(height: 10),
      new Expanded(flex: 0, child: getOutlineButtonRow(context)),
      SizedBox(height: 10),
      new Expanded(flex: 0, child: getCupertinoButton(context)),
      SizedBox(height: 10),
    ]);
  }

  Widget getMaterialButton(BuildContext context) {
    return MaterialButton(
      key: ValueKey("text"),
      child: Text("MaterialButton"),
      onPressed: pressedBtn(context),
      onHighlightChanged: onHighlightChanged(context),
      textTheme: ButtonTextTheme.normal,
      textColor: Colors.blue,
      disabledTextColor: Colors.red,
      color: Color(0xFF82B1FF),
      disabledColor: Colors.grey,
      highlightColor: Colors.grey,
      // 按下的背景色
      splashColor: Colors.green,
      // 水波紋顏色
      colorBrightness: Brightness.light,
      // 主題
      elevation: 10,
      highlightElevation: 10,
      disabledElevation: 10,
      padding: EdgeInsets.all(10),
//       MaterialButton shape 子類才起效
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          side: BorderSide(
              color: Color(0xFFFFFFFF), style: BorderStyle.solid, width: 2)),
      clipBehavior: Clip.antiAlias,
      materialTapTargetSize: MaterialTapTargetSize.padded,
      animationDuration: Duration(seconds: 1),
      minWidth: 200,
      height: 50,
    );
  }

  Widget getRaisedButtonRow(BuildContext context) {
    return new Row(children: [
      SizedBox(width: 10),
      new Expanded(flex: 1, child: getRaisedButton(context)),
      SizedBox(width: 10),
      new Expanded(flex: 1, child: getRaisedButtonIcon(context)),
      SizedBox(width: 10),
    ]);
  }

  Widget getRaisedButton(BuildContext context) {
    return RaisedButton(
      child: Text("RaisedButton"),
      onPressed: pressedBtn(context),
      onHighlightChanged: onHighlightChanged(context),
      textTheme: ButtonTextTheme.normal,
      textColor: Colors.blue,
      disabledTextColor: Colors.red,
      color: Color(0xFF82B1FF),
      disabledColor: Colors.grey,
      highlightColor: Colors.grey,
      // 按下的背景色
      splashColor: Colors.green,
      // 水波紋顏色
      colorBrightness: Brightness.light,
      // 主題
      elevation: 10,
      highlightElevation: 10,
      disabledElevation: 10,
      padding: EdgeInsets.all(10),
      // RaisedButton 才起效
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          side: BorderSide(
              color: Color(0xFFFFF00F), style: BorderStyle.solid, width: 2)),
      clipBehavior: Clip.antiAlias,
      materialTapTargetSize: MaterialTapTargetSize.padded,
      animationDuration: Duration(seconds: 1),
//      minWidth: 200,
//      height: 50,
    );
  }

  Widget getRaisedButtonIcon(BuildContext context) {
    return RaisedButton.icon(
      icon: Icon(Icons.menu),
      label: Text("RaisedButton.icon"),
      onPressed: pressedBtn(context),
      onHighlightChanged: onHighlightChanged(context),
      textTheme: ButtonTextTheme.normal,
      textColor: Colors.blue,
      disabledTextColor: Colors.red,
      color: Color(0xFF82B1FF),
      disabledColor: Colors.grey,
      highlightColor: Colors.red,
      // 按下的背景色
//      splashColor: Colors.green,// 水波紋顏色
      colorBrightness: Brightness.light,
      // 主題
      elevation: 10,
      highlightElevation: 10,
      disabledElevation: 10,
//      padding: EdgeInsets.all(10),
      // RaisedButton 才起效
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10)),
          side: BorderSide(
              color: Color(0xFFF0F00), style: BorderStyle.solid, width: 2)),
      clipBehavior: Clip.antiAlias,
      materialTapTargetSize: MaterialTapTargetSize.padded,
      animationDuration: Duration(seconds: 1),
//      minWidth: 200,
//      height: 50,
    );
  }

  Widget getFlatButtonRow(BuildContext context) {
    return new Row(children: [
      SizedBox(width: 10),
      new Expanded(flex: 1, child: getFlatButton(context)),
      SizedBox(width: 10),
      new Expanded(flex: 1, child: getFlatButtonIcon(context)),
      SizedBox(width: 10),
    ]);
  }

  Widget getFlatButton(BuildContext context) {
    return FlatButton(
      child: Text("FlatButton"),
      onPressed: pressedBtn(context),
      onHighlightChanged: onHighlightChanged(context),
      textTheme: ButtonTextTheme.normal,
      textColor: Colors.yellow,
      disabledTextColor: Colors.red,
      color: Color(0xFF82B1FF),
      disabledColor: Colors.grey,
      highlightColor: Colors.grey,
      // 按下的背景色
      splashColor: Colors.transparent,
      // 水波紋顏色
      colorBrightness: Brightness.light,
      // 主題
//      elevation: 10,
//      highlightElevation: 10,
//      disabledElevation: 10,
      padding: EdgeInsets.all(10),
//       RaisedButton 才起效
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          side: BorderSide(
              color: Color(0xFFF9F3FF), style: BorderStyle.solid, width: 2)),
      clipBehavior: Clip.antiAlias,
      materialTapTargetSize: MaterialTapTargetSize.padded,
//      animationDuration: Duration(seconds:1),
//      minWidth: 200,
//      height: 50,
    );
  }

  Widget getFlatButtonIcon(BuildContext context) {
    return FlatButton.icon(
      icon: Icon(
        Icons.menu,
        color: Colors.green,
      ),
      label: Text("FlatButton.icon"),
      onPressed: pressedBtn(context),
      onHighlightChanged: onHighlightChanged(context),
      textTheme: ButtonTextTheme.normal,
      textColor: Colors.yellow,
      disabledTextColor: Colors.red,
      color: Color(0xFF82B1FF),
      disabledColor: Colors.grey,
      highlightColor: Colors.red,
      // 按下的背景色
      splashColor: Colors.green,
      // 水波紋顏色
      colorBrightness: Brightness.light,
      // 主題
//      elevation: 10,
//      highlightElevation: 10,
//      disabledElevation: 10,
//      padding: EdgeInsets.all(10),
      // RaisedButton 才起效
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(10)),
          side: BorderSide(
              color: Color(0xFF6FFF00), style: BorderStyle.solid, width: 2)),
      clipBehavior: Clip.antiAlias,
      materialTapTargetSize: MaterialTapTargetSize.padded,
//      animationDuration: Duration(seconds:1),
//      minWidth: 200,
//      height: 50,
    );
  }

  Widget getOutlineButtonRow(BuildContext context) {
    return new Row(children: [
      SizedBox(width: 10),
      new Expanded(flex: 1, child: getOutlineButton(context)),
      SizedBox(width: 10),
      new Expanded(flex: 1, child: getOutlineButtonIcon(context)),
      SizedBox(width: 10),
    ]);
  }

  Widget getOutlineButton(BuildContext context) {
    return OutlineButton(
      child: Text("OutlineButton"),
      onPressed: pressedBtn(context),
//      onHighlightChanged: onHighlightChanged,
      textTheme: ButtonTextTheme.accent,
      textColor: Colors.blueAccent,
      disabledTextColor: Colors.red,
      color: Color(0xFF82B1FF),
//      disabledColor: Colors.grey,
      highlightColor: Color(0xFF2962FF),
      // 按下的背景色
      splashColor: Colors.red,
      // 水波紋顏色
//      colorBrightness: Brightness.light,   // 主題
//      elevation: 10,
      highlightElevation: 10,
//      disabledElevation: 10,
      padding: EdgeInsets.all(10),
//       RaisedButton 才起效
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          side: BorderSide(
              color: Color(0xFFFFFF00), style: BorderStyle.solid, width: 2)),
      clipBehavior: Clip.antiAlias,
//      materialTapTargetSize: MaterialTapTargetSize.padded,
//      animationDuration: Duration(seconds:1),
//      minWidth: 200,
//      height: 50,
    );
  }

  Widget getOutlineButtonIcon(BuildContext context) {
    return OutlineButton.icon(
      icon: Icon(
        Icons.menu,
        color: Colors.green,
      ),
      label: Text("OutlineButton.icon"),
      onPressed: pressedBtn(context),
//      onHighlightChanged: onHighlightChanged,
      textTheme: ButtonTextTheme.normal,
      textColor: Colors.yellow,
      disabledTextColor: Colors.red,
      color: Color(0xFF82B1FF),
//      disabledColor: Colors.grey,
      highlightColor: Colors.red,
      // 按下的背景色
      splashColor: Colors.green,
      // 水波紋顏色
//      colorBrightness: Brightness.light,   // 主題
//      elevation: 10,
      highlightElevation: 10,
//      disabledElevation: 10,
      padding: EdgeInsets.all(10),
      // RaisedButton 才起效
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(12)),
      ),
      clipBehavior: Clip.antiAlias,
//      materialTapTargetSize: MaterialTapTargetSize.padded,
//      animationDuration: Duration(seconds:1),
//      minWidth: 200,
//      height: 50,
    );
  }

  Widget getCupertinoButton(BuildContext context) {
    return CupertinoButton(
      child: Text("CupertinoButton"),
      onPressed: pressedBtn(context),
      color: Colors.blue,
      disabledColor: Colors.grey,
      padding: EdgeInsets.all(10),
      minSize: 50,
      pressedOpacity: 0.8,
      borderRadius: BorderRadius.all(Radius.circular(8.0)),
    );
  }

  ValueChanged<bool> onHighlightChanged(BuildContext context) {
    return (bool b) {
      showToast(context, "onHighlightChanged:" + b.toString());
    };
  }

  VoidCallback pressedBtn(BuildContext context) {
    return () {
      showToast(context, "pressedBtn");
    };
  }

  void showToast(BuildContext context, var msg) async {
    Widget _buildToastWidget() {
      return Center(
        child: Card(
          color: Colors.black26,
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
            child: Text(
              msg,
              style: TextStyle(
                fontSize: 14.0,
                color: Colors.white,
              ),
            ),
          ),
        ),
      );
    }

    //獲取OverlayState
    OverlayState overlayState = Overlay.of(context);
    //創建OverlayEntry
    OverlayEntry _overlayEntry = OverlayEntry(
        //toast靠它加到屏幕上
        builder: (BuildContext context) => Positioned(
              //top值，可以改變這個值來改變toast在屏幕中的位置
              top: MediaQuery.of(context).size.height * 4 / 7,
              child: Container(
                  alignment: Alignment.center,
                  width: MediaQuery.of(context).size.width,
                  child: Padding(
                    padding: EdgeInsets.symmetric(horizontal: 80.0),
                    child: _buildToastWidget(),
                  )),
            ));
    //顯示到屏幕上。
    overlayState.insert(_overlayEntry);
    //等待2秒
    await Future.delayed(Duration(seconds: 2));
    //移除
    _overlayEntry.remove();
  }

Flutter RaisedButton、FlatButton、OutlineButton 參數詳解