在颤动中创建凹槽按钮？

Question

是否可以使按钮像图像一样？它不必是圆形的，只是有什么可以使Flutter中的凸起按钮和文本字段区域产生凹槽效果？ 图像的链接也是“ https://css-tricks.com/circular-3d-buttons/” 这是css制作的，如果材料设计上有技巧，也许css import可以完成这项工作？

Answer 1

尝试一下

    new RawMaterialButton(
  onPressed: () {},
  child: new Icon(
     Icons.pause,
     color: Colors.blue,
     size: 35.0,
  ),
  shape: new CircleBorder(),
  elevation: 2.0,
  fillColor: Colors.white,
  padding: const EdgeInsets.all(15.0),
),

Answer 2

通过使用RawMaterialButton和装饰的容器，您可以获得非常相似的结果。

Container(
  padding: EdgeInsets.all(10),      
  decoration: new BoxDecoration(
     shape: BoxShape.circle,
     gradient: LinearGradient(
       begin: Alignment.bottomCenter,
       end: Alignment.topCenter,
       stops: [0.0 , 0.5, 1.0],
       colors: [Colors.white, Colors.white, Colors.grey[200]]
     )  
  ),
  child: RawMaterialButton(
    onPressed: () {},
    child: new Icon(
      Icons.settings,
        color: Colors.grey[600],
        size: 28.0,
     ),
     shape: new CircleBorder(),
     elevation: 2.0,
     fillColor: Colors.white,
     padding: const EdgeInsets.all(18.0),
   )
);