Border or Outline to a widget in Flutter

There are a couple of ways to add a border to a Flutter widget. The most basic way is to wrap your widget in a DecoratedBox. If you use a Container widget, you can use decoration attribute in it. 

Widget myWidget() {
  return Container(
    margin: const EdgeInsets.all(30.0),
    padding: const EdgeInsets.all(10.0),
    decoration: BoxDecoration(
       border: Border.all( 
         width: 1,
         color: Colors.orange, 
      ),
    ), //  POINT: BoxDecoration
    child: Text(
      "text",
      style: TextStyle(fontSize: 30.0),
    ),
  );
}

decoration attribute is assigned to the BoxDecoration constructor with border attribute. 

We can have specific borders like right, left, top, or bottom using BorderSide.

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border(
      left: BorderSide( // POINT
        color: Colors.black,
        width: 3.0,
      ),
      top: BorderSide( // POINT
        color: Colors.black,
        width: 3.0,
      ),
    ),
  );
}

The radius affects the roundness of the corners.

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.all(
        Radius.circular(5.0) // POINT
    ),
  );
}

See more options:

Ref. https://medium.com/jlouage/flutter-boxdecoration-cheat-sheet-72cedaa1ba20

youngdeok의 이미지

Language

Get in touch with us

"어떤 것을 완전히 알려거든 그것을 다른 이에게 가르쳐라."
- Tryon Edwards -