In this example, we are going to show you the easiest way to add borders to the Container widget on Flutter. We will show you to add fully on all four sides and on the specific side too. See the example below.
Container(
height:50,
width:300,
decoration: BoxDecoration(
border: Border.all(
color: Colors.black, //color of border
width: 2, //width of border
),
borderRadius: BorderRadius.circular(5)
),
)
See this also: How to Make Dotted/Dash Border on Container in Flutter App
Container(
margin: EdgeInsets.only(top:20),
height:50,
width:300,
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: Colors.redAccent, width: 2
),
bottom: BorderSide(
color: Colors.purpleAccent, width: 5
),
left: BorderSide(
color: Colors.black, width: 10
),
right: BorderSide(
color: Colors.green, width: 4
)
)
),
)
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp( home: MyApp(),)
);
}
class MyApp extends StatefulWidget{
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text("Add Border to Container"),
backgroundColor: Colors.deepPurpleAccent
),
body: Container(
alignment: Alignment.topCenter,
margin: EdgeInsets.only(top:20),
child: Column(
children:[
Container(
height:50,
width:300,
decoration: BoxDecoration(
border: Border.all(
color: Colors.black, //color of border
width: 2, //width of border
),
borderRadius: BorderRadius.circular(5)
),
),
Container(
margin: EdgeInsets.only(top:20),
height:50,
width:300,
decoration: BoxDecoration(
border: Border(
top: BorderSide(
color: Colors.redAccent, width: 2
),
bottom: BorderSide(
color: Colors.purpleAccent, width: 5
),
left: BorderSide(
color: Colors.black, width: 10
),
right: BorderSide(
color: Colors.green, width: 4
)
)
),
),
]
)
)
);
}
}
In this way, you can add borders to Container Widget in Flutter.
Please Wait...
2 Comments on this Article
shalom
Great article. Very helpful for me as I am starting to learn Flutter/Dart. Just a few typos. ʺDardʺ is one of them.
Hari Prasad Chaudhary
Thank you very much for correcting us. We have edited the typo.
2 years ago