如何在AnimatedContainer中制作圆形边框?

时间:2018-12-19 08:59:28

标签: dart flutter flutter-animation

我一直试图在AnimatedContainer中打圆角。所以我写了这段代码:

 return Center (
    child: Column (
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget> [
        AnimatedContainer (
          duration: Duration(milliseconds: 200),
          color: Colors.white,
          height: _isContainerVisible ? 500.0 : 0.0,
          width: _isContainerVisible ? 300.0 : 0.0,
          decoration: BoxDecoration (
            borderRadius: BorderRadius.circular(25.0)
          ),
        )
      ]
    )
  );

由于某种原因,我无法将角弄圆。我也为此收到一条错误消息。有办法使圆角变圆吗?

1 个答案:

答案 0 :(得分:2)

您错过了

border: Border.all(color: Colors.blue)

还要从color中删除AnimatedContainer并将其添加到decoration

完整的解决方案

return Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      AnimatedContainer(
        duration: Duration(milliseconds: 200),
        height: 300,
        width: 300,
        decoration: BoxDecoration(
          color: Colors.white, // added
          border: Border.all(color: Colors.orange, width: 5), // added
          borderRadius: BorderRadius.circular(25.0),
        ),
      ),
    ],
  ),
);