Add border to a Container with borderRadius in Flutter

Solution 1:

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

Solution 2:

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

Solution 3:

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

Solution 4:

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.

Solution 5:

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