Search code examples
flutteralignmentchat

flutter: how to align time on the bottom right side of chat message


Here is my chat screen screenshot. I want to align time under chat message not from the start but on the bottom right side of the chat tile.

enter image description here

How can I do that in my code?

 Column(
    crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Container(
                    child: Padding(
                      padding: const EdgeInsets.only(top: 2.0),
                      child: Image.network(senderPhoto,
            ))),
                  SizedBox(width: 20),
                  Text(peerName),
                ],
              ),
              Container(
                  margin: EdgeInsets.only(right: 130),
                  padding: EdgeInsets.only(
                      top: 10, bottom: 10, left: 10, right: 10),
                  ),
                  child: Text(message,
                          textAlign: TextAlign.start,
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 16,
                              )),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(top: 1.0),
                    child: Text(
                      timeSent.toDate(),
                      style: TextStyle(fontSize: 10, color: Colors.white),
                    ),
                  ),
                ],
              ),
            ],
          ))

Solution

  • Wrap your timeSent.toDate padding widget into a row, and give that a mainaxisAlignment of end, like this:

         Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Padding(
                padding: const EdgeInsets.only(top: 1.0),
                child: Text(
                  timeSent.toDate(),
                  style: TextStyle(fontSize: 10, color: Colors.white),
                ),
              ),
            ],
          ),
    

    This will solve your problem.