Row mainAxisAlignment spaceBetween property not working - Flutter

Question

I'm building a message tile for chat screen in the flutter. I'm making the use of spaceBetween property of mainAxisAlignment in row to keep both text widget apart from each other but it's not making any impact

here is my code

Row(
                            mainAxisAlignment: messageModel.sender == FirebaseAuth.instance.currentUser!.uid.trim() ? MainAxisAlignment.start : MainAxisAlignment.end,
                            children: [
                              Container(
                                margin: const EdgeInsets.only(bottom: 15.0),
                                padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0),
                                decoration: BoxDecoration(
                                    color: const Colors.greenAccent,
                                    borderRadius: BorderRadius.circular(15.0)
                                ),
                                child: Column( // Used expanded property on this, but that didn't work too
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Text(messageModel.message.toString(), style: GoogleFonts.oswald(color: Colors.white)),
                                    const SizedBox(height: 2.0),
                                    Row(
                                      mainAxisAlignment: MainAxisAlignment.spaceBetween, // not working
                                      children: [
                                        Text(DateFormat.jm().format(messageModel.createdOn!).toString(), style: GoogleFonts.oswald(color: Colors.white, fontSize: 12.0,)),
// also tried to make the use of spacer widget, but that didn't work too
                                        const Icon(CustomIcons.check, color: Colors.white, size: 12.0)
                                      ],
                                    )
                                  ],
                                ),
                              )
                            ],
                          );

I'm trying to keep time and tick icon apart from each other

Answer 1

the problem here is that the row is occupying the least amount of width possible for what it stores inside it, and that is that there is no separation since there is no space available inside the row for said separation, you could do the following to solve this . At least it works for me to handle it that way.

you need to wrap the row in a container to which you assign a min value of width and a max value if you want to anyway. I only left it with minimum value

                       Container(
                              constraints: const BoxConstraints(minWidth: 120),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment
                                    .spaceBetween, // not working
                                mainAxisSize: MainAxisSize.max,
                                children: [
                                  Text('fecha X',
                                      style: GoogleFonts.oswald(
                                        color: Colors.white,
                                        fontSize: 12.0,
                                      )), // also tried to make the use of spacer widget, but that didn't work too
                                  const Icon(Icons.check,
                                      color: Colors.white, size: 12.0)
                                ],
                              ),
                            )