在颤动中创建凹槽按钮？答案

【问题标题】：Create a groove button in flutter?在颤动中创建凹槽按钮？
【发布时间】：2024-01-17 08:01:01
【问题描述】：

是否可以制作像图像一样的按钮？它不需要是圆形的，反正是否可以将凹槽效果添加到 Flutter 中的凸起按钮和文本字段区域？图片的链接也是“https://css-tricks.com/circular-3d-buttons/” 这是由 css 制作的，如果有什么技巧可以用材料设计来做，也许 css 导入这样的工作？

【问题讨论】：

标签： flutter button uibutton flutter-layout

【解决方案1】：

使用 RawMaterialButton 和装饰的 Container 可以获得非常相似的结果。

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

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：