CODEWITHSUNDEEP
flutterdartflutter-layout
A_Bee
A_Bee

Reputation: 101

How to have a rounded border with only 3 sides?

How can I add a rounded border for only 3 sides of the box? It's giving me errors if i add an "only" per sides if there is a border radius included.

enter image description here

this is my Code

Container(
  padding: const EdgeInsets.all(10.0),
  decoration: BoxDecoration(
    border: Border.all(color:Colors.grey, width: 2.5),
    borderRadius: BorderRadius.circular(13.0),
  ),
  child: child,
)

Upvotes: 3

Views: 3202

Answers (2)

CopsOnRoad
CopsOnRoad

Reputation: 267404

I didn't quite get the screenshot but to have border for three sides, say for only left, right and bottom, use:

final borderSide = BorderSide(color: Colors.white, width: 2);

Container(
  decoration: BoxDecoration(
    border: Border(
      left: borderSide,
      right: borderSide,
      bottom: borderSide,
    ),
  ),
  child: child,
)

Upvotes: 4

Deepak Lohmod
Deepak Lohmod

Reputation: 2272

simply use .only in place of .circular

Container(
    padding: const EdgeInsets.all(10.0),
    decoration: BoxDecoration(
      border: Border.all(color:Colors.grey, width: 2.5),
      borderRadius: BorderRadius.only(topLeft: Radius.circular(13.0),topRight: Radius.circular(13.0)),
    ),
    child: child,
  )

Similarly you can add bottomLeft and bottomRight in .only

Upvotes: 1

Related Questions