Apps to migrate image https://lh3.googleusercontent.com/sTFx8QfUzgnrT69cK54V9igmCd04GLIlTmrwAC01GISRDsbGNL9KZeXNnKeILHdNUQ=w1853-h942
What I'm working on
class ScheduleListItem extends StatelessWidget {
ScheduleListItem({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: 300,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: Colors.black26, offset: Offset(0, 5), blurRadius: 5)
]),
margin: EdgeInsets.all(7),
child: Row(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
width: 15,
decoration: BoxDecoration(
color: Colors.red,
borderRadius:
BorderRadius.horizontal(left: Radius.circular(10))),
),
Column(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween ,
children: <Widget>[Text("Data"), Text("Data")],
),
Row(
children: <Widget>[Text("Data"), Text("Data")],
),
Row(
children: <Widget>[Text("Data"), Text("Data")],
)
],
)
],
),
);
}
}
You need to wrap your Column
in Expanded
and then you can use Spacer
property, it takes up the remaining space.
Expanded(
child: Column(
children: <Widget>[
Row(children: <Widget>[Text("Data"), Spacer(), Text("Data")]),
Row(children: <Widget>[Text("Data"), Spacer(), Text("Data")]),
Row(children: <Widget>[Text("Data"), Spacer(), Text("Data")])
],
),
)
You can also use flex
in Spacer
to tell how you wanna divide the occupancy of the remaining area if you have more than one Spacer
in a Row/Column
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With