Flutter row mainAxisAlignment spaceBetween not working

Question

This is my code to build the item view container:

Widget buildItemView(InboxItem t) {

return GestureDetector(
  behavior: HitTestBehavior.translucent,
  onTap: () => print("ontap")),
  child: Column(
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      Padding(padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Container(
                  icon ...
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[

                  /// title
                  _buildTitle(t),

                  ...
                ],
              )
            ],
          )),
      Divider(height: 3.0)
    ],
  ),
);
}

and _buildTitle code, here is where the problem occurs:

Widget _buildTitle(InboxItem item) {
return Container(
  padding: EdgeInsets.only(bottom: 2.0),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[

      /// sender
      Text(item.sender == null ? "" : item.sender, style: ltBlackLargeText),

      /// time
      Text(item.receiveTime == null ? "" : item.receiveTime,
          style: dkGreySmallText),

    ],
  ),
);
}

Run result, time is immediately after the username instead of the right.

This is part of the screenshot:

Where is the problem?

Answer 1

Because the superior does not fill the remaining space, change the item view code:

Widget buildItemView(InboxItem t) {

return GestureDetector(
  behavior: HitTestBehavior.translucent,
  onTap: () => print("ontap")),
  child: Column(
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      Padding(padding: EdgeInsets.fromLTRB(15.0, 10.0, 15.0, 10.0),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Container(
                  icon ...
              ),
              Expanded(
                child:Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[

                    /// title
                    _buildTitle(t),

                    ...
                  ],
                ) ,
              )
            ],
          )),
      Divider(height: 3.0)
    ],
  ),
);
}

Answer 2

Wrap Column Widget with Expanded inside Row as below,

Row(
    children: [
      Image.asset("assets/..."),
      Expanded(
        child: Column(children: [
          Row(
            children: [
              Text("admin"),
              Text("2020-12-14"),
            ],
          ),
        ]),
      ),
    ],
  )