CODEWITHSUNDEEP
flutterdart
Bishal Shrestha
Bishal Shrestha

Reputation: 89

Custom border for a flutter widget

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

Can anyone have an idea how to do this in flutter without a custom painter?

Please notice it doesn't have a bottom border.

Upvotes: 2

Views: 1160

Answers (4)

Darshini R Gowda
Darshini R Gowda

Reputation: 111

Please Refer Below code:

Padding(
                              padding: const EdgeInsets.all(15.0),
                              child: ClipRRect(
                                borderRadius:
                                    BorderRadius.all(Radius.circular(7)),
                                child: Container(
                                  height: 100,
                                  width: double.infinity,
                                  decoration: BoxDecoration(
                                    border: Border(
                                      left: BorderSide(
                                        color: Colors.black,
                                        width: 4.0,
                                      ),
                                      top: BorderSide(
                                        color: Colors.black,
                                        width: 4.0,
                                      ),
                                      right: BorderSide(
                                        color: Colors.black,
                                        width: 4.0,
                                      ),
                                    ),
                                  ),
                                  child: Center(
                                    child: Text('Custom Border'),
                                  ),
                                ),
                              ),
                            )

Upvotes: 0

Ranjit Shrestha
Ranjit Shrestha

Reputation: 772

Container(
          height: 100,
          width: 200,
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            border: Border(
              top: BorderSide(width: 5.0, color: Colors.black),
              left: BorderSide(width: 5.0, color: Colors.black),
              right: BorderSide(width: 5.0, color: Colors.black),
              bottom: BorderSide(width: 0, color: Colors.white),
            ),
            color: Colors.white,
          ),
          child: const Text('OK', textAlign: TextAlign.center, style: TextStyle(color: Color(0xFF000000))),
        )

Upvotes: 3

Ravindra S. Patil
Ravindra S. Patil

Reputation: 14885

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: image

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: image

Upvotes: 0

Rintu Banerjee
Rintu Banerjee

Reputation: 124

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
        )

Upvotes: 0

Related Questions