Space between is not working, did i do something wrong?

Question

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")],
              )
            ],
          )
        ],
      ),
    );
  }
}

See this for better understanding about the concept - https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e — Keerti Purswani, Apr 11 '19 at 08:38

CopsOnRoad · Accepted Answer · 2019-04-11T12:58:50.683

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

score 2 · Answer 2 · answered Apr 11 '19 at 07:05

I assume you would like to place the two Text Widgets apart in a Row. If so your column is not taking up the entire horizontal space. You could simply wrap it into an Expanded widget like so:

Expanded(
  child: Column(
    children: <Widget>[
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[Text("Data"), Text("Data")],
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[Text("Data"), Text("Data")],
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[Text("Data"), Text("Data")],
      )
    ],
  ),
)

This will produce this output:

Space between is not working, did i do something wrong?

2 Answers2