带圆角的 AnimatedContainer

Question

我一直在尝试在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)
          ),
        )
      ]
    )
  );

由于某种原因，我无法使拐角变圆。我也收到了一条错误消息。有没有办法让角变圆？

Answer 1

你错过了

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

同时从AnimatedContainer 中删除color 并将其添加到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),
        ),
      ),
    ],
  ),
);