How to make a Text ellipsis when it inside a row wid

Question

I first come up with the following:

                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Expanded(
                      child: Text(
                        myText,
                        style: TextStyle(color: colorScheme.primary),
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                    const SizedBox(
                      width: 20,
                    ),
                    Icon(
                      Icons.featured_play_list_outlined,
                      color: colorScheme.primary,
                      size: 15,
                    )
                  ],
                ),

But the problem is, the SizedBox and Icon always stick at right. What I want is, when the text is not overflow, it will just place adjacent to the text widget, but not always stick at right.

But If I remove the Expanded widget, the text will not be ellipsis and just overflow.

So how do I achieve what I want?

Thanks

PS. What I want: Row, when Text not overflow:

+---------------------------------------------------+
|+-------------++--------++----+                    |
|| Text Widget ||SizedBox||Icon|                    |
|+-------------++--------++----+                    |
+---------------------------------------------------+

Row, when Text overflow:

+---------------------------------------------------+
|+---------------------------------++--------++----+|
|| Text Widget with ellipsis ......||SizedBox||Icon||
|+---------------------------------++--------++----+|
+---------------------------------------------------+

Answer 1

Replace your Expanded into a Flexible widget instead, if you don't want to always "expand" to use the maximum available space of the parent.