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

Question

Is there any way to set the floating action buttons color as a radial gradient in flutter? Something like below:

Answer 1

Set a container as the child of that FAB and assign a gradient to the container.

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),],
         ),
      ),
   ),
),

It will look like:

EDIT:

For adding icon, you have to specify a size to your container and set the icon as it's child (I've used the FAB default size of 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),],
         ),
      ),
   ),
),

And now it will look like: