Add Border To A Container With BorderRadius In Flutter

Answer :

It's not possible to add border: and borderRadius: at the same time, you'll get this error:

A borderRadius can only be given for uniform borders.

You can achieve what you want using the borderRadius: and a boxShadow: instead of border: like this:

boxShadow: [   BoxShadow(color: Colors.green, spreadRadius: 3) ] 

Your sample code would be like this:

Container(   child: Text(     'This is a Container',     textScaleFactor: 2,     style: TextStyle(color: Colors.black),   ),   decoration: BoxDecoration(     borderRadius: BorderRadius.circular(10),     color: Colors.white,     boxShadow: [       BoxShadow(color: Colors.green, spreadRadius: 3),     ],   ),   height: 50, ), 

---

Edit: To achieve the example you now provided, you could do this:

Container(   padding: EdgeInsets.only(left: 12.0),   decoration: BoxDecoration(     borderRadius: BorderRadius.circular(10.0),     color: Colors.green,   ),   height: 50,   child: Container(     decoration: BoxDecoration(       borderRadius: BorderRadius.only(           topRight: Radius.circular(10.0),           bottomRight: Radius.circular(10.0)),       color: Colors.white,     ),     child: Text(       'This is a Container',       textScaleFactor: 2,       style: TextStyle(color: Colors.black),     ),   ), ), 

Another solution:

Container(   decoration: BoxDecoration(     borderRadius: BorderRadius.circular(10.0),     color: Colors.white,   ),   height: 50,   child: Row(     mainAxisSize: MainAxisSize.min,     children: <Widget>[       Container(         width: 12.0,         decoration: BoxDecoration(           borderRadius: BorderRadius.only(               topLeft: Radius.circular(10.0),               bottomLeft: Radius.circular(10.0)),           color: Colors.green,         ),       ),       Text(         'This is a Container',         textScaleFactor: 2,         style: TextStyle(color: Colors.black),       )     ],   ), ), 

There are a couple ways to add a border to a Flutter widget. The most basic way is to wrap your widget in a DecoratedBox. However, the Container widget also has a DecoratedBox built in.

For output as above use a Stack instead of Row because of Stack allows us to make multiple widgets overlay each other and you can align or position your widget using the Align or Positioned widget.

 Container(   height: 65,   decoration: BoxDecoration(     borderRadius: BorderRadius.circular(10),     color: Colors.deepPurple.shade100,   ),   child: Stack(     children: <Widget>[       Container(         width: 8,          decoration: BoxDecoration(           borderRadius: BorderRadius.only(               topLeft: Radius.circular(15),               bottomLeft: Radius.circular(15)),           color: Colors.deepPurple,         ),       )     ],   ), )