Custom border for a flutter widget-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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
        )

CodePudding user response：

Please Refer Below code:

Container(
                                    height: 100,
                                    width: 100,
                                    decoration: BoxDecoration(
                                      border: Border.all(
                                        width: 4,
                                        color: Colors.black,
                                      ),
                                      borderRadius: BorderRadius.circular(10.0),
                                    ),
                                    child: Center(
                                      child: Text('Custom Border'),
                                    ),
                                  )

CodePudding user response：

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: