Adding a border to a widget in Flutter

In the following examples I will use Container for the convenience of adding margin and padding.Here is the general setup.Widget myWidget() { return Container( margin: const EdgeInsets.all(30.0), padding: const EdgeInsets.all(10.0), decoration: myBoxDecoration(), // <— BoxDecoration here child: Text( "text", style: TextStyle(fontSize: 30.0), ), );}where the BoxDecoration isBoxDecoration myBoxDecoration() { return BoxDecoration( border: Border.all(), );}Border widthThese have a border width of 1, 3, and 10 respectively.BoxDecoration myBoxDecoration() { return BoxDecoration( border: Border.all( width: 1, // <— border width here ), );}Border colorThese have a border color ofColors.redColors.blueColors.greenCodeBoxDecoration myBoxDecoration() { return BoxDecoration( border: Border.all( color: Colors.red, // <— border color width: 5.0, ), );}Border sideThese have a border side ofleft (3.0), top (3.0)bottom (13.0)left (blue[100], 15.0), top (blue[300], 10.0), right (blue[500], 5.0), bottom (blue[800], 3.0)CodeBoxDecoration myBoxDecoration() { return BoxDecoration( border: Border( left: BorderSide( // <— left side color: Colors.black, width: 3.0, ), top: BorderSide( // <— top side color: Colors.black, width: 3.0, ), ), );}Border radiusThe radius affects the roundness of the corners.These have border radii of 5, 10, and 30 respectively.BoxDecoration myBoxDecoration() { return BoxDecoration( border: Border.all( width: 3.0 ), borderRadius: BorderRadius.all( Radius.circular(5.0) // <— border radius here ), );}Going onDecoratedBox/BoxDecoration are very flexible..Read Flutter — BoxDecoration Cheat Sheet for many more ideas.. More details

Leave a Reply