border radius not apply inside container widget

Question

Border radius not apply inside child Container. Tried with SizedBox & Stack widget. I need border view inside container.

Scaffold(   appBar: AppBar(     title: new Text("ListView"),   ),   body: Center(       child: Padding(         padding: EdgeInsets.all(15.0),         child: Container(             decoration: BoxDecoration(                 borderRadius: BorderRadius.circular(15.0),                 border: Border.all(                     color: Colors.green,                     width: 2.0                 )             ),             child: Container(               color: Colors.red,             )         ),       )   ) ) 

Answer 1

Try this, Use ClipRRect and nest inside another Container and now you can add non-uniform borders

Container(                     decoration: BoxDecoration(                       color: Colors.white,                       borderRadius: BorderRadius.circular(10),                       boxShadow: [BoxShadow(color: Colors.black12, blurRadius: 5)],                     ),                     child: ClipRRect(                       borderRadius: BorderRadius.circular(10),                       child: Container(                         padding: EdgeInsets.all(20),                         decoration: BoxDecoration(                           border: Border(                             left: BorderSide(color: Colors.indigo, width: 5),                           ),                         ),                         child: Column(                           mainAxisSize: MainAxisSize.min,                           children: <Widget>[                             Icon(Icons.home),                             Text("Home"),                           ],                         ),                       ),                     ),                   ) 

Answer 2

decoration is painted behind the child. If you want the decoration to be applied in front of the container's child, use foregroundDecoration

Scaffold(   appBar: AppBar(     title: new Text("ListView"),   ),   body: Center(       child: Padding(         padding: EdgeInsets.all(15.0),         child: Container(             foregroundDecoration: BoxDecoration(                 borderRadius: BorderRadius.circular(15.0),                 border: Border.all(                     color: Colors.green,                     width: 2.0                 )             ),             child: Container(               color: Colors.red,             )         ),       )   ) ) 

above code paints border in front of the child container. Please note that, even with foregroundDecoration child container would still have sharp corners.

If you want child container to have rounded corners, either you need apply borderRadius to child container or use ClipRRect with same border radius as parent container