How to add border on a container inside a row widget in Flutter?
5,762
Solution 1
In order to add border on container inside row widget , we have to use decoration for the inner containers. Once you will post the error, we can answer you better but i think the below code will be helpful for you. If you are using decoration then you must not add colour attribute in container directly, it should be in decoration only.
Container(
child: Row(
children: <Widget>[
Container(
child: Text("hi"),
margin: EdgeInsets.fromLTRB(20, 8, 8, 16),
width: MediaQuery.of(context).size.width * 0.42,
height: 90,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4)),
shape: BoxShape.rectangle,
border: Border.all(
color: Colors.blue,
width: 4,
)),
),
Container(
child: Text("Hi"),
margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
width: MediaQuery.of(context).size.width * 0.42,
height: 90,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4)),
shape: BoxShape.rectangle,
border: Border.all(
color: Colors.blue,
width: 4,
)),
)
],
),
),
Solution 2
In container widgets you cannot use the color
and decoration
at the same time. Remove the color
property from the Container
and move it into the BoxDecoration
widget
This should work:
Container(
child: Row(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black45),
borderRadius: BorderRadius.circular(8.0),
color: Colors.black12, //add it here
),
child: Text("hi"),
margin : EdgeInsets.fromLTRB(20, 8, 8, 16),
width: MediaQuery.of(context).size.width *0.42,
height: 90,
//color: Colors.black12, //must be removed
),
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.black45),
borderRadius: BorderRadius.circular(8.0),
color: Colors.black12, //add it here
),
child: Text("Hi"),
margin: EdgeInsets.fromLTRB(16, 8, 8, 16),
width: MediaQuery.of(context).size.width * 0.42 ,
height: 90,
//color: Colors.black12, // must be removed
)
],
),
),
Author by
Anant Raman
Updated on December 18, 2022Comments
-
Anant Raman over 1 year
Container( // decoration: BoxDecoration( // border: Border.all(color: Colors.black45), // borderRadius: BorderRadius.circular(8.0), // ), child: Row( children: <Widget>[ Container( child: Text("hi"), margin : EdgeInsets.fromLTRB(20, 8, 8, 16), width: MediaQuery.of(context).size.width *0.42, height: 90, color: Colors.black12, ), Container( child: Text("Hi"), margin: EdgeInsets.fromLTRB(16, 8, 8, 16), width: MediaQuery.of(context).size.width * 0.42 , height: 90, color: Colors.black12, ) ], ), ),
I can add border using Box decoration on the outer container, but it's throwing me an error when I am trying to do the same on the inner containers. What is the problem and how to solve it?