如何为颤动按钮添加边框？

Posted 2021-04-09

我最近刚刚陷入困境，到目前为止我很喜欢它，但我已经陷入了一些UI变化。任何帮助表示赞赏！

我的目标是获得一个带有蓝色背景图标的圆形按钮，但外面有一个深蓝色的边框。附有图片。

我的方法是：

1. 获得一个圆形的蓝色按钮。
2. 在该按钮中放置一个图标。
3. 添加边框。

我被困在第3步，因为我不知道如何添加边框，或者甚至可能给出我接近问题的方式。具体的颜色对我来说并不重要，我稍后会改变主题。

这就是我目前的代码明智：

  var messageBtn = new Row(
  children: <Widget>[
    new Padding(
      padding: const EdgeInsets.all(20.0),
      child: new RawMaterialButton(
        onPressed: _messages,
        child: new Padding(
          padding: const EdgeInsets.all(20.0),
          child: new Icon(
            Icons.message,
            size: 30.0,
            color: Colors.white,
          ),
        ),
        shape: new CircleBorder(),
        fillColor: Colors.deepPurple,
      ),
    ),
    new Padding(
        padding: const EdgeInsets.all(8.0),
        child: new Text(
          'Send Messages',
          style: new TextStyle(
            fontSize: 20.0,
          ),
        )),
  ],
);

它产生了这个：see screenshot

我想要这个：see second screenshot

答案

嗨Kathleen，欢迎！

你可以通过更深入地了解构成MaterialButton的小部件来实现你想要的。

首先，你需要Ink小部件。这使用BoxDecoration提供更灵活的造型。

然后Ink可以包含一个InkWell小部件，它识别onTap并绘制飞溅效果。默认情况下，飞溅继续到包含框的边缘，但你可以通过给InkWell一个非常大的borderRadius使它成为圆形。

以下是您所关注按钮的示例：

Material(
  child: Ink(
    decoration: BoxDecoration(
      border: Border.all(color: Colors.indigoAccent, width: 4.0),
      color: Colors.indigo[900],
      shape: BoxShape.circle,
    ),
    child: InkWell(
      //This keeps the splash effect within the circle
      borderRadius: BorderRadius.circular(1000.0), //Something large to ensure a circle
      onTap: _messages,
      child: Padding(
        padding:EdgeInsets.all(20.0),
        child: Icon(
          Icons.message,
          size: 30.0,
          color: Colors.white,
        ),
      ),
    ),
  )
),

这是结果：