Flutter UI: Text + Icon centered w/ overflow management

I would appreciate help with the idiomatic way of implementing this UI feature. Suppose I want to have a combo of an IconButton and Text (for example, a name, which has a star preceding it). I would like to position it in a Row (which itself is in a container, like Column). However, I want to make sure the following requirements are met (see the attached sketch):

• The icon is right in front of the text (i.e. no extra spacing in between)
• When the text is short enough, this pair of widgets is centered within the row.
• If the text is too long, it is properly clipped (e.g. with ellipsis) without overflowing.

So far, I have not been very successful in making this work. If I put two Spacer widgets on the sides, the resulting text is clipped very aggressively. If I wrap it in Expanded, I get flex exceptions. Given that it is ostensibly a fairly popular way to present text, what is the Flutter way to lay it out?

I have tried below code as per your provided image. hope its help to you.

Container(
            padding: EdgeInsets.all(5),// manage padding on your need
            decoration: BoxDecoration(
              color: Colors.blue.shade200,
              border: Border.all(color: Colors.black, width: 0.5),
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisSize:
                  MainAxisSize.min, // add  MainAxisSize.min for your container width along with text
              children: [
                Icon(Icons.star, color: Colors.white),
                Flexible(
                  child: const Text(
                    'So far, I have been very successful in making this work. ',
                    overflow: TextOverflow.ellipsis,
                  ),
                ),
              ],
            ),
          ),

Result screens: