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
"If you would thoroughly know anything, teach it to other."
- Tryon Edwards -