Flutter Button（按鈕）

在 Flutter 裡有很多的 Button，包括了：MaterialButton、RaisedButton、FloatingActionButton、FlatButton、IconButton、ButtonBar、DropdownButton 等。

一般常用的 Button 是 MaterialButton、IconButton、FloatingActionButton。

MaterialButton 是一個 Materia 風格的按鈕。

new MaterialButton(
    color: Colors.blue,
    textColor: Colors.white,
    child: new Text('點我'),
    onPressed: () {
        // ...
    },
)

一般來說，如果需要點選事件，就要巢狀一個 Button，因為 Container、Text 等元件都沒有點選事件。

RaisedButton

RaisedButton 與 MaterialButton 類似。

new RaisedButton(
    child: new Text('點我'),
    onPressed: () {},
)

FlatButton

FlatButton 與 MaterialButton 類似，不同的是它是透明背景的。如果一個 Container 想要點選事件時，可以使用 FlatButton 包裹，而不是 MaterialButton。因為 MaterialButton 預設帶背景，而 FlatButton 預設不帶背景。

new FlatButton(
    child: new Text('點我'),
    onPressed: () {},
)

IconButton

IconButton 顧名思義就是 Icon + Button 的複合體，當某個 Icon 需要點選事件時，使用 IconButton 最好不過。

new IconButton(
    icon: new Icon(Icons.volume_up),
    tooltip: 'Increase volume by 10%',
    onPressed: () {
        // ...
    },
)

其外，還有已經定義好的 Icon Button：CloseButton、BackButton。他們都有導航返回的能力。

FloatingActionButton

FloatingActionButton 是一個浮動在頁面右下角的浮動按鈕。

new Scaffold(
    // ...
    floatingActionButton: new FloatingActionButton(
        onPressed: () {},
        child: new Icon(Icons.add_a_photo),
        elevation: 3.0,
        highlightElevation: 2.0,
        backgroundColor: Colors.red,        // 紅色
    ),
)

在 Scaffold 裡使用的時候，它是一個浮動狀態的按鈕，在其他地方使用，就不會浮動了。

ButtonBar

ButtonBar 是一個佈局元件，可以讓 Button 排列在一行。

new ButtonBar(
    children: <Widget>[
        new CloseButton(),
        new BackButton(),
    ],
)