來吧！Flutter(10)-Buttons

Flutter 提供了多種按鈕樣式可以使用，常用的按鍵 Widget 如下:

FlatButton：一個含有點擊效果的文字，因為沒有外框，所以通常是放在相對位置來確定其上下文。例如在一個 Card、Dialog 中。一般用在不明顯的行為上。

OutlineButton：用在比 FlatButton 更多資訊的情境上，通常包含重要的行為，但不是應用程式的主要動作。

RaisedButton：比起 OutlineButton 以及 FlatButton，更強調該按鈕的重要。會有顏色填滿以及陰影。

IconButton：直接使用圖示提示使用者按鈕的行為。

FloatingActionButton：通常擺放在該頁面的右下角，表示該畫面主要的任務。

使用方式是在該 Button Widget 上填上 child/icon 以及 onPressed。如下：

基礎按鈕類別

• 當 onPressed設為 null 或是未指定時，則該按鈕會呈現 Disabled 的狀態。
• Button 預設的顏色為 ThemeData中的 accentColor，我們亦可針對特定按鈕設定特定的顏色。

IconButton 底下加上文字

• 將 IconButton與 Text利用 Column Widget包起來，即可完成。

但是，這個文字卻無法按。

因為下方的 Text並沒有 onPressed可以設定。

該如何讓全部都可以按呢？

1. 利用 InkWell Widget 將 Column Widget 包起來。
2. 將原本 IconButton Widget 的 onPressed Function 搬到 InkWell Widget的onTap中。
3. 因 IconButton的 onPressedonPressed function已搬至 InkWell 中，所以可以用 IconWidget 替換原本的 IconButton。

程式碼：

註：我在 Icon 外面包了一層 Padding ，使其相似於原本的樣貌。

GestureDetector

前面介紹了可以使用 InkWell Widget 包裝 Column Widget，讓 Column 變成可以點選。除了可以用 InkWell 來接收點擊外，還有一個好用的 Widget — GestureDetector。

跟 InkWell 不同的地方是， InkWell 可以產生點擊後有波紋的效果，而 GestureDetector 除了 onTap(), onLongPress(), onDoubleTap() 以外，與 InkWell 相比還可以偵測更多種觸控 event。

範例：

利用 GestureDetector 讓 Image 變成可以點擊。

如果用 InkWell 替換 GestureDetector 能夠出現波紋嗎？

⇒ 不會，因為 InkWell 的波紋是出現在 Material 層，而 Image 是非透明的，所以會將 Material 層蓋住，無法產生出波紋。

小結

Flutter 內建多種 Material Design 風格的按鈕，用法也非常容易，通常都只需要設定 child/icon 以及 onPressed 即可。

遇到無法按的項目時，我們可以利用 InkWell 或是 GestureDetector widget 來將該項目加上按鈕效果。

InkWell 如果無法出現波紋，有可能是因為 child 是不透明的，所以波紋繪製的 material 層看不到。

謝謝。

參考

Material.io: Buttons

flutter.dev: buttons

圖片來源:https://unsplash.com/