如何使 Flutter 中的按鈕與圖標的形狀相同？

Question

我正在嘗試創建一個退格按鈕（使用ElevatedButton() ）。 我不希望按鈕是圓形的，而是與圖標具有相同的形狀。 此外，當點擊按鈕時，我希望飛濺效果與按鈕的大小和形狀相同。

我在下面附上了我要復制的形狀的參考圖像。

額外挑戰：我還嘗試將按鈕的填充顏色設置為黑色，將按鈕的顏色設置為灰色（如示例）。

Answer 1

您可以使用IconButton()小部件而不是ElevtaedButton()以及定義splashRadius來更改飛濺效果的大小：

IconButton(
            splashRadius: 1, // Set the Size of the splash area
            color: Colors.grey,
            icon: Icon(Icons.backspace),
            onPressed: () {},
          ),

結果：

或者，如果您想使用ElevatedButton() ，請使用.icon構造函數：

 ElevatedButton.icon(
            style: ElevatedButton.styleFrom(primary: Colors.grey.shade300),
            label: Text('Hello World'),
            icon: Icon(
              Icons.backspace,
              color: Colors.grey,
            ),
            onPressed: () {},
          )

結果：

Answer 2

類Icons中有很多默認圖標不適合您的應用。 您可以使用一些設計平台，例如 Figma，然后將其下載為svg 。 那么代碼可能是：

InkWell(
  onTap: () {},
  child: SvgPicture.asset(path_to_svg_icon)
)

這樣，您可以為您的圖標編輯顏色、形狀、樣式...。 祝你好運！