Flutter中FloatingActionButton上的渐变背景

Question

是否可以将浮动操作按钮（FAB）的背景色设置为渐变而不是纯色？

我的按钮：

floatingActionButton: FloatingActionButton(
    backgroundColor: const Color(0xFFFF006E),
    child: const Icon(Icons.add, size: 40.0),
    onPressed: () {
        print('Start');
    },
),

- Reynir Freyr

Answer 1

floatingActionButton: FloatingActionButton(
  child: Container(
    width: 60,
    height: 60,
    child: Icon(
      Icons.add,
      size: 40,
    ),
    decoration: BoxDecoration(
      shape: BoxShape.circle,
      gradient: LinearGradient(colors: [Colors.red, Colors.blue])
    ),
  ),
  onPressed: () {},
)

- Azhagusundaram Tamil

---

这可以禁用浮动操作按钮的onPressed方法中的涟漪效果。 - Alain C. Jiménez

Answer 2

您可以使用带有所需渐变的Container

floatingActionButton: FloatingActionButton(
            child: Container(
              height: 60,
              width: 60,
              decoration: BoxDecoration(
                shape: BoxShape.circle, // circular shape
                gradient: LinearGradient(
                  colors: [
                    Colors.blueAccent,
                    Colors.red,
                  ],
                ),
              ),
              child: Icon(
                Icons.add,
                color: Colors.white,
              ),
            ),
          )

- JideGuru

---

请注意，这将禁用Inkwell效果。 - Eray Erdin

Answer 3

我找到了解决方案。我不需要设置高度和宽度。首先，我用容器包装了浮动操作按钮。然后，我将浮动操作按钮的背景颜色更改为透明。

示例代码：

Container(
    decoration: BoxDecoration(
    gradient: LinearGradient(
        colors: [
        Colors.yellow,
        Colors.yellow.shade700,
        ],
    ),
    shape: BoxShape.circle,
    ),
    child: FloatingActionButton(
    onPressed: () {},
    backgroundColor: Colors.transparent,
    elevation: 0,
    child: Icon(Icons.home)
    ),
),

- Osman EseR

Answer 4

希望这样可以做到....

 FloatingActionButton(
    onPressed: () {},
      child: Container(
        height: 60,
        width: 60,
        decoration: BoxDecoration(
          shape: BoxShape.circle, 
          gradient: LinearGradient(
            colors: [
              Colors.teal,
              Colors.tealAcent
            ],
          ),
        ),
        child: Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
    )

- MD MEHEDI HASAN