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 -