# Flutter各類型Button
###### tags: `Flutter`
:::info
:bulb: **Hint:** 基本上只有UI不一樣，功能面大同小異。
:::
這邊介紹四種不同的按鈕，單純以風格作為分類的話就是[Android](#Android)(RawMaterialButton)和[iOS](#iOS)(CupertinoButton)兩個類型。
不過要注意的是，不同風格也都適用於各類型手機（包含Web），並不是Android的手機只能用Android風格，iOS的手機只能用iOS風格的。
## Android

| 類型 | 特色 |
| ------------- | ---------------- |
| RaisedButton | 表面凸起的按鈕 |
| OutlineButton | 外框線按鈕 |
| FlatButton | 無陰影的平面按鈕 |

基本架構如下：

FlatButton/*RaisedButton*//*OutlineButton*/(
    color: Colors.grey,
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8.0)),
    child: Text('Button'),
    onPressed: () {},
    ),

1. 基本的顏色跟形狀等等外觀都可以直接設定，當然你可以在child裡面再加一層Container去做樣式的改變，但不建議，你的程式碼會變中央山脈。
3. Shape官方提供了下列的形狀可以直接使用：
1. CircleBorder（圓形）
2. RoundedRectangleBorder（圓角矩形）
3. ContinuousRectangleBorder（帶圓弧邊框的矩形）
4. BeveledRectangleBorder（斜角矩形）

4. 點擊分為長(onLongPress)跟短(onPress)兩種

## iOS
#### CupertinoButton
iOS風格的按鈕，由於是跨平台，又是個獨立出來的語言，在UI設計上Flutter團隊就將iOS的風格重新刻了一遍，並命名為 Cupertino（蘋果總部地名）提供我們去使用。
由於是依照iOS風格做設計，因此就沒辦法自行改變形狀。