Flutter 单击按钮时在按钮周围绘制边框

目标：每当用户按下按钮时，围绕

扁平按钮绘制边框

换句话说：
onPressed（）
被调用？-><代码>绘图边框（）

---

用例：最终用户界面应允许用户选择多个按钮，这些按钮应具有边框，以让用户知道它们已被选中

问题：无法以编程方式绘制边框，更不用说在同一UI中有多个按钮（大约9个按钮左右）

按钮代码：

 FlatButton(
   color: kWhite,
   onPressed: () {},
   child: Image.asset('assets/images/gucci.jpg'),
   shape: RoundedRectangleBorder( //Draw when user clicks on the button 
     side: BorderSide(
     color: kDarkTitleColor, width: 1),
     ),
       padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
      ),

---

您可以将按钮包装在

StatefulWidget

中，如下所示：

class BorderedFlatButton extends StatefulWidget {
  @override
  _BorderedFlatButtonState createState() => _BorderedFlatButtonState();
}

class _BorderedFlatButtonState extends State<BorderedFlatButton> {
  bool isSelected = false;

  @override
  Widget build(BuildContext context) {
    return FlatButton(
      color: kWhite,
      onPressed: () {
        print(isSelected);
        setState(() {
          isSelected = !isSelected;
        });
      },
      child: Image.asset('assets/images/gucci.jpg'),
      shape: RoundedRectangleBorder(
        side: BorderSide(
            color: isSelected ? kDarkTitleColor : Colors.transparent, width: 1),
      ),
      padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
    );
  }
}

类边界FlatButton扩展StatefulWidget{
@凌驾
_BorderedFlatButtonState createState（）=>\u BorderedFlatButtonState（）；
}
类_BorderedFlatButtonState扩展状态{
bool-isSelected=false；
@凌驾
小部件构建（构建上下文）{
返回按钮(
颜色：kWhite，
已按下：（）{
印刷品（已选出）；
设置状态（）{
isSelected=！isSelected；
});
},
子级：Image.asset（'assets/images/gucci.jpg'），
形状：圆形矩形边框(
边线(
颜色：isSelected？kDarkTitleColor:颜色。透明，宽度：1），
),
填充：从LTRB（10,10,10,10）开始的边缘设置，
);
}
}

---

PS：这里我添加了一个状态变量

isSelected

，它指示按钮是否被选中。

我不明白您的问题。你为什么不能画呢？只需将按钮移动到单独的StatefulWidget，并在点击时处理状态更改，显示和隐藏此边框。请确保使用透明边框颜色，因为如果尝试使用宽度，则无法使用此颜色。