Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Row mainAxisAlignment spaceBetween property not working – Flutter

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

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)
                                ],
                              ),
                            )
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading