How to format text in a row without shifting everything

Question

I have a list view in my flutter app that is populated with cards.

Each card is going to have a circular avatar, the name of a user over the date the alert happened, then shifted all the way to the right will be an icon and the title of the alert.

To get a better idea of what I'm talking about I've provided a picture here.

So right now I only have the icon and title to the right and the name of the user to the left. Only thing is depending on the size of the title of the alert it shifts the position of user's name.

I feel like this would be an easy fix but I have no idea.

Code below:

Card(
 child: SizedBox(
          height: MediaQuery.of(context).size.height * .08,
          child: Row(
                  mainAxisSize: MainAxisSize.max,
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                      SizedBox(width: 10.0),
                      SizedBox(
                          width: MediaQuery.of(context).size.width * .08),
                      Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          AutoSizeText(curAlert.fname +
                              ' ' +
                              '${curAlert.lname[0]}' +
                              '.')
                        ],
                      ),
                      SizedBox(
                          width: MediaQuery.of(context).size.width * .1),
                      AutoSizeText(curAlert.title),
                      Icon(
                        Icons.warning_amber_outlined,
                        color: Colors.red[900],
                        size: MediaQuery.of(context).size.width * .1,
                      ),
                    ],
                  ),
                ),
              );

Answer 1

Adding a Spacer() or Wrapping the right most portion in a container and a row yielded the same results.

Adding a Container and Row makes the code look like this:

Card(
  child: SizedBox(
      height: MediaQuery.of(context).size.height * .08,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
           SizedBox(width: 10.0),
           SizedBox(
              width: MediaQuery.of(context).size.width * .08),
           Column(
             mainAxisAlignment: MainAxisAlignment.center,
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
               AutoSizeText(curAlert.fname +
                              ' ' +
                              '${curAlert.lname[0]}' +
                              '.')
             ],
           ),
           Container(
             width: MediaQuery.of(context).size.width * .7,
             child: Row(
                 mainAxisAlignment: MainAxisAlignment.end,
                 children: [
                     SizedBox(
                        width: MediaQuery.of(context).size.width * .1),
                        AutoSizeText(curAlert.title),
                        Icon(
                          Icons.warning_amber_outlined,
                          color: Colors.red[900],
                          size: MediaQuery.of(context).size.width * .1,
                        ),
                     ]),
                   ),
                 ],
               ),
             ),
           );

Adding a Spacer Makes the code look like this:

    Card(
  child: SizedBox(
      height: MediaQuery.of(context).size.height * .08,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
           SizedBox(width: 10.0),
           SizedBox(
              width: MediaQuery.of(context).size.width * .08),
           Column(
             mainAxisAlignment: MainAxisAlignment.center,
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
               AutoSizeText(curAlert.fname +
                              ' ' +
                              '${curAlert.lname[0]}' +
                              '.')
             ],
           ),
           Spacer(),
           SizedBox(
             width: MediaQuery.of(context).size.width * .1),
           AutoSizeText(curAlert.title),
           Icon(
             Icons.warning_amber_outlined,
             color: Colors.red[900],
             size: MediaQuery.of(context).size.width * .1,
           ),
          ],
         ),
        ),
       );

Functionally both end up with the same result I was looking for.