Flutter give container rounded border

Question

I\'m making container, I gave it a border, but I would be nice to have rounded borders.

This is what I have now (see image)

https://drive.google.com/file/d/1

Answer 1

Container(
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(20.0),
      border: Border.all(
        color: HexColor('#C88A3D'),
        width: 3.0
      )
    ),
    child: Container(
      decoration: new BoxDecoration(borderRadius:
      BorderRadius.circular(20.0),
      color: Colors.white,),
    )
  ),

Answer 2

Enhancement for the above answer.

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
   borderRadius: BorderRadius.circular(20) // use instead of BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)

Answer 3

Try using the property borderRadius from BoxDecoration

Something like

Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.red[500],
    ),
    borderRadius: BorderRadius.all(Radius.circular(20))
  ),
  child: ...
)

Answer 4

You can use ClipRRect Widget :

ClipRRect (
  borderRadius: BorderRadius.circular(5.0),
  child: Container(
                    height: 25,
                    width: 40,
                    color: const Color(0xffF8742C),
                    child: Align(
                        alignment: Alignment.center,
                        child: Text("Withdraw"))),
          )

Answer 5

To make it completely circle.

Container(
      
      decoration: BoxDecoration(
        
        shape: BoxShape.circle
      ),

To make it circle at selected spots.

Container(
      
      decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(40.0),
              bottomRight: Radius.circular(40.0)),
             topLeft: Radius.circular(40.0),
              bottomLeft: Radius.circular(40.0)), 
         
      child: Text("hello"),
    ),

or

  Container(
   decoration: BoxDecoration(
    
   borderRadius: BorderRadius.all(Radius.circular(20))
 ),
 child: ...
)

Answer 6

One option is to use ShapeDecoration with RoundedRectangleBorder:

  Container(decoration: ShapeDecoration(shape: RoundedRectangleBorder())