Add border to a Container with borderRadius in Flutter

There is an answer here

Container(
            decoration: BoxDecoration(
                border: Border.all(
                    color: Color(0xFFF05A22),
                    style: BorderStyle.solid,
                    width: 1.0,
                ),
                color: Colors.transparent,
                borderRadius: BorderRadius.circular(30.0),
            ),
),

This might be so late but also it might be useful for others.

You can wrap your Container inside a ClipRRect, give the ClipRRect the radius and give the Container the border!

Example:

ClipRRect(
   borderRadius: const BorderRadius.all(Radius.circular(16.0)),
   child: Container(
     height: 100,
     width: double.maxFinite,
     padding: const EdgeInsets.all(16.0),
     decoration: BoxDecoration(
       border: Border(
         left: BorderSide(width: 8.0, color: Colors.green),
       ),
     ),
   ),
 ),

This should do the UI you lastly posted.


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

If you want to achieve borderRadius you could also use a PhysicalModel, but you'll have to provide colour. You also can have a shadow for your widget.

PhysicalModel(
  color: Colors.red,
  elevation: 5,
  shadowColor: Colors.blue,
  borderRadius: BorderRadius.circular(20),
  child: SizedBox(width: 75, height: 75),
)