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

Can you provide snippet without depending on outside and an image you are trying to archive, in my test case It is working fine — Md. Yeasin Sheikh, Jul 19 '22 at 18:33
@YeasinSheikh check comments in code! I referred where the problem is occuring — shakti goyal, Jul 19 '22 at 18:39
Weird... anyway the solution offered by Christian Godoy worked for me! Thank you for your help! Appreciate that :) — shakti goyal, Jul 19 '22 at 18:57
OH I thought your text will cover the width and I hard coded the value. — Md. Yeasin Sheikh, Jul 19 '22 at 19:03
I’m still open to other approaches (if there is better approach to do it) — shakti goyal, Jul 19 '22 at 19:18

score 1 · Answer 1 · answered Jul 19 '22 at 18:50

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)
                                ],
                              ),
                            )

One question though, this would keep the width fixed for each message tile, Is there any other better approach to do it because I wanted to keep the width according to message length — shakti goyal, Jul 19 '22 at 19:04
`mainAxisSize` for Row is set to max by default. It's not the right approach because it will bound the size of the text to expand — Usama Karim, Jul 19 '22 at 19:16
For that I recommend that you visit this question, here we talk about how to get the size of a widget during its construction and through that you can give it the same width as the message. https://stackoverflow.com/questions/49307677/how-to-get-height-of-a-widget#:~:text=To%20get%20the%20size%2Fposition,global%20position%20and%20rendered%20size. — Christian Godoy, Jul 19 '22 at 19:31
hello friend, I just remembered your problem and a better solution for what you were looking for (if you still have that problem). is to wrap your Column widget with the IntrinsicWidth widget and leave the rest of the code as you originally had it. I hope it works for you! — Christian Godoy, Jul 20 '22 at 16:40

Row mainAxisAlignment spaceBetween property not working - Flutter

1 Answers1