如何制作径向渐变浮动动作按钮

Question

是否可以将浮动操作按钮的颜色设置为颤动中的径向渐变？如下所示：

Answer 1

将一个容器设置为该FAB的子代，并为该容器分配一个渐变。

FloatingActionButton(
   onPressed: () {},
   tooltip: 'Cool FAB',
   child: Container(
      decoration: BoxDecoration(
         shape: BoxShape.circle,
         gradient: RadialGradient(
            center: const Alignment(0.0, 0.0),
            radius: 0.5,
            colors: [ Color(0xFF0187D0), Color(0xFF01579C),],
         ),
      ),
   ),
),

它看起来像：

编辑：

要添加图标，您必须为容器指定大小并将图标设置为子图标（我使用的是FAB默认大小56x56）。

FloatingActionButton(
   onPressed: () {},
   tooltip: 'Cool FAB',
   child: Container(
      width: 56,
      height: 56,
      child: Icon(Icons.settings),
      decoration: BoxDecoration(
         shape: BoxShape.circle,
         gradient: RadialGradient(
            center: const Alignment(0.0, 0.0),
            radius: 0.5,
            colors: [ Color(0xFF0187D0), Color(0xFF01579C),],
         ),
      ),
   ),
),

现在看起来像：