Flutter UI - button系 Widget

Flutter 的按鈕 widget 種類可是超過預期啊，這個得好好看看的

• RaisedButton - 凸起按鈕，帶陰影
• FlatButton - 扁平按鈕，不帶陰影
• OutlineButton - 自帶邊框的按鈕，不能設定背景色color
• MaterialButton - MD 風格的按鈕，可以設定寬高值
• IconButton - 在 Icon 基礎上加上點選事件，不能設定背景色和邊框

*** MaterialButton 基本屬性

Flutter 的按鈕基本都是繼承自：MaterialButton，我們來看看MaterialButton的屬性：

  const MaterialButton({
    Key key, 
    @required this.onPressed, // 點選事件，必須給值，寫null的話表示不可用
    this.onHighlightChanged, 
    this.textTheme, //預設文字樣式
    this.textColor, // 文字顏色
    this.disabledTextColor, // 不可用時文字顏色
    this.color, // 背景色
    this.disabledColor,
    this.highlightColor, // 點選之後的顏色，注意這個顏色點選之後就一直在這裡了，不是那種一瞬間顯示
    this.splashColor, // 波浪紋顏色
    this.colorBrightness,
    this.elevation, // Z軸高度，決定陰影，正常應該小於 5
    this.highlightElevation,
    this.disabledElevation,
    this.padding,
    this.shape, // 按鈕樣式
    this.clipBehavior = Clip.none,
    this.materialTapTargetSize,
    this.animationDuration,
    this.minWidth,
    this.height,
    this.child, // 按鈕內部widget，一般都是text
  })
複製程式碼

1. 說一下textTheme,這是系統預設給的按鈕背景顏色樣式：

• ButtonTextTheme.normal:

  

• ButtonTextTheme.accent：

  

• ButtonTextTheme.primary：

  

這是為了 MD 風格統一

2. shape提供4種按鈕形狀樣式：

• BeveledRectangleBorder

  

• CircleBorder

  

• RoundedRectangleBorder

  

• StadiumBorder

  

---

RaisedButton

RaisedButton - 凸起按鈕，帶陰影的那種

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        onPressed: () {
          print("AAAAAA");
        },
        color: Colors.blueAccent,
        child: Text(
          "浮動按鈕",
          style: TextStyle(fontSize: 30),
        ),
        textColor: Colors.white,
        elevation: 10,
        disabledColor: Colors.grey,
        padding: EdgeInsets.all(20),
        splashColor: Colors.red,
        shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ));
  }
}
複製程式碼

---

FlatButton

FlatButton - 扁平按鈕，不能帶陰影，其他和 RaisedButton 一樣

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlatButton(
        onPressed: () {
          print("AAAAAA");
        },
        color: Colors.blueAccent,
        child: Text(
          "浮動按鈕",
          style: TextStyle(fontSize: 30),
        ),
        textColor: Colors.white,
        disabledColor: Colors.grey,
        padding: EdgeInsets.all(20),
        splashColor: Colors.red,
        shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.circular(10),
        ));
  }
}
複製程式碼

---

OutlineButton

OutlineButton - 自帶邊框的按鈕，不能設定背景色color

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new OutlineButton(
      onPressed: () {
        print(BorderStyle.values);
      },
      borderSide: BorderSide(
          color: Colors.blue,
          width: 2.0,
          style: BorderStyle.solid
      ),
      child: new Text('pressed'),
    );
  }
}
複製程式碼

---

MaterialButton

MaterialButton - MD 風格的按鈕，屬性同上，但是可以設定寬高值

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      minWidth: 200,
      height: 80,
      color: Colors.blue,
      textColor: Colors.white,
      onPressed: () {
        print("AAAAAA");
      },
      child: new Text('button'),
    );
  }
}
複製程式碼

---

IconButton

IconButton - 在 Icon 基礎上加上點選事件，不能設定背景色和邊框，圖就沒必要放了，child除了可以接受Icon之外，還可以接受RichText

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
        onPressed: () {
          print("AAAAAA");
        },
        color: Colors.red,
        iconSize: 50,
        icon: new Icon(Icons.star),
        padding: const EdgeInsets.all(12.0)
    );
  }
}
複製程式碼

---