flutter - 单击时在 FlatButton 周围绘制边框

Question

目标:每当用户按下该按钮时，在 FlatButton 周围绘制一个边框。

换句话说:onPressed() 被调用了？ -> DrawBorder()

---

用例:最终的 UI 应该允许用户选择多个按钮，这些选择的按钮应该有一个边框，让用户知道它们已被选中。

问题:无法以编程方式绘制边框，更不用说在同一 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),
      ),

Answer 1

您可以像这样将按钮包装在 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),
    );
  }
}

PS:这里我添加了一个状态变量isSelected来指示按钮是否被选中。