Custom border for a flutter widget

Question

I have a custom border to draw around a widget. I have attached an image

Can anyone have an idea how to do this in flutter?

Answer 1

Here is a simple way you can achieve solid border in your widget .

Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            border: Border.all(
              width: 5,
              color: Colors.red,
            ),
          ),
        ),

Answer 2

Please Refer Below code:

Padding(
  padding: const EdgeInsets.all(15.0),
    child: Container(
        height: 100,
        width: double.infinity,
        decoration: BoxDecoration(
         border: Border.all(
            width: 4,
            color: Colors.black,),
        borderRadius:BorderRadius.circular(10.0),),
        child: Center(
           child: Text('Custom Border'),),),
 ),

Answer 3

Wrap the widget with Container

 Container(
            decoration: BoxDecoration(
            border: Border.all(width: 5.0, color: Colors.black),
             borderRadius: BorderRadius.circular(20.0) )// change value as per your needs
     child: //your widget
        )

Answer 4

Try below code hope its help to you.

If you want only Top corner are rounded:

  Container(
        width: double.infinity,
        height: 100,
        decoration: BoxDecoration(
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(10),
            topRight: Radius.circular(10),
          ),
          border: Border.all(
            width: 3,
            color: Colors.black,
          ),
        ),
      ),

Result top rounded corner:

If you want all container rounded:

Container(
        width: double.infinity,
        height: 100,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          border: Border.all(
            width: 5,
            color: Colors.black,
          ),
        ),
      ),    

All rounded contaner result: