I am trying to move the red block to the right of the Container
. I have tried many variations but no matter where I move the code, that "red container" bit, I cannot get it to the position on the top right. I will make it a clickable icon when I get the positioning right.
I did move it into the children Widget with the other Text, adjusted the "crossAxisAlignment to stretch in that row, and mainAxisAlignment to spaceBetween,"
The closest I have is the 2nd image which is the code added below.
What am I missing?
items.add(
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: [BoxShadow(color: Colors.black12,spreadRadius: 2.0,blurRadius: 5.0),]),
margin: EdgeInsets.all(5.0),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0)),
child: Image.asset(object["personImage"],
width: 80,height: 80,fit: BoxFit.cover,
),
),
Container(
color: Colors.blue[900],
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(object["personName"]),
Text(object["personPlace"]),
Text(object["personDate"]),
Text(object["personCircle"]),
],
),
),
),
Container(
alignment: Alignment.topRight,
height: 42.0,
width: 42.0,
color: Colors.red,
)
],
),
),
);
},
);
return items;
Edit: So two solutions that worked out great. Adding a widget between blue and red containers. Thanks to you both: :)
T.T Sage » Spacer(),
Viren V Varasadiya » Expanded(child: Container()),
You can use a widget called Spacer()
for this.
The Spacer
widget takes up space that isn't used by the rest of your widget. Check the code below, it works fine:
items.add(
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(Radius.circular(10.0)),
boxShadow: [BoxShadow(color: Colors.black12,spreadRadius: 2.0,blurRadius: 5.0),]),
margin: EdgeInsets.all(5.0),
child: Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0)),
child: Image.asset(object["personImage"],
width: 80,height: 80,fit: BoxFit.cover,
),
),
Container(
color: Colors.blue[900],
child: Padding(
padding: const EdgeInsets.fromLTRB(8, 8, 0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(object["personName"]),
Text(object["personPlace"]),
Text(object["personDate"]),
Text(object["personCircle"]),
],
),
),
),
// add your spacer widget here
Spacer(),
Container(
alignment: Alignment.topRight,
height: 42.0,
width: 42.0,
color: Colors.red,
)
],
),
),
);
},
);
return items;
I hope this answers your question.