如何为颤振按钮添加边框？答案

【问题标题】：How do I add a border to a flutter button?如何为颤振按钮添加边框？
【发布时间】：2019-02-17 12:49:55
【问题描述】：

我最近刚刚接触到颤振，到目前为止我很喜欢它，但我一直卡在一些 UI 更改上。任何帮助表示赞赏！

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

我的做法是：

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

我被困在第 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

【问题讨论】：

标签： button dart icons flutter border

【解决方案1】：

嗨，凯瑟琳，欢迎！

您可以通过更深入地研究构成 MaterialButton 的小部件来实现您想要的。

首先您需要Ink 小部件。这使用BoxDecoration 提供了更灵活的样式。

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

以下是您要使用的按钮的示例：

Material(
  type: MaterialType.transparency, //Makes it usable on any background color, thanks @IanSmith
  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,
        ),
      ),
    ),
  )
),

结果如下：

【讨论】：

嗯，更新破坏了这个？由于 BoxDecoration 形状，它现在有一个白框作为背景。也许它从未被注意到..
@IanSmith，它在最新的 Flutter 稳定版 (1.17) 上仍然为我工作。很高兴查看您的代码。
@Xander 这是一个显示问题的示例应用程序：pastebin.com/raw/tTCVzRmP
@IanSmith 谢谢，我明白你的意思了。我们可能应该使用Material(type: MaterialType.transparency)。我会更新答案?

【解决方案2】：

只需将IconButton 包装成Container 并将其decoration 设置如下：

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blue, width: 4),
    color: Colors.yellow,
    shape: BoxShape.circle,
  ),
  child: IconButton(
    iconSize: 56,
    icon: Icon(Icons.check),
    onPressed: () {},
  ),
),

【讨论】：

【解决方案3】：

可以使用带边框的 FloatingActionButton ：

   FloatingActionButton(
                              mini: false,
                              backgroundColor: Colors.blue.shade900,
                              splashColor: Colors.black,
                              onPressed: () {
                                logOutDialog(context);
                              },
                              hoverElevation: 1.5,
                              shape: StadiumBorder(
                                  side: BorderSide(
                                      color: Colors.blue, width: 4)),
                              elevation: 1.5,
                              child: Icon(
                                Icons.logout,
                                color: _foregroundColor,
                              ),
                            )

【讨论】：

【解决方案4】：

在 Flutter 2 中有 TextButton:

TextButton(
  style: ButtonStyle(
   side: RedSelectedBorderSide(),
  ),
  child: Text(
    "Button"
  ),
  onPressed: (){}
);

RedSelectedBorderSide() 在哪里：

class RedSelectedBorderSide extends MaterialStateBorderSide {
  @override
  BorderSide resolve(Set<MaterialState> states) {
    if (states.contains(MaterialState.selected)) {
      return BorderSide(
        width: 2,
        color: Colors.red,
      ); // 
    }
    return null;// Defer to default value on the theme or widget.
  }
}

【讨论】：

【解决方案5】：

对于TextButton

在style 内部使用side 和MaterialStateProperty 和BorderSide。

TextButton(
  style: ButtonStyle(
   side: MaterialStateProperty.all(
     BorderSide(width: 1, color: Colors.black),
   ),
  ),
  child: Text(
    "My Button"
  ),
  onPressed: (){}
);

【讨论】：