AnimatedContainer with rounded corners

Issue

I have been trying to make rounded corners in an AnimatedContainer. So I wrote this code :

 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)
          ),
        )
      ]
    )
  );

for some reason I cannot make the corner rounded. Also I am getting an error message for this. Is there a way to make the corners rounded?

Solution

You missed

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

Also delete color from AnimatedContainer and add that in decoration

Complete solution

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),
        ),
      ),
    ],
  ),
);

Answered By – CopsOnRoad

Answer Checked By – Mary Flores (FlutterFixes Volunteer)