title: FlatButton.icon with Overflowing Text in Flutter
body: <p>I would like to make a <code>FlatButton</code> with overflowing <code>Text</code>. To show the widget boxes, I placed <code>Container</code>s around some of the widgets.</p>
  
  <pre><code>  @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          color: Colors.lime,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                color: Colors.yellow,
                child: FlatButton.icon(
                  label: Container(
                    color: Colors.blue,
                    child: Text('Short Text'),
                  ),
                  icon: Icon(Icons.done),
                  onPressed: () {},
                ),
              ),
              Container(
                color: Colors.orange,
                child: FlatButton.icon(
                  label: Container(
                    color: Colors.red,
                    child: Text('Long Long Long Long Long Long Long Long Text'),
                  ),
                  icon: Icon(Icons.done),
                  onPressed: () {},
                ),
              ),
            ],
          ),
        ),
      );
    }
  </code></pre>
  
  <p><img src="https://i.imgur.com/97kn48i.png" alt="Result of above code"></p>
  
  <p>To solve the overflow error and add ellipsis at the end of overflowing <code>Text</code>s, I've read the <a href="https://github.com/flutter/flutter/blob/fabf4e3d0d311181178d2c601d29a2f739ea543a/packages/flutter/lib/src/material/flat_button.dart#L270" rel="nofollow noreferrer"><code>FlatButton.icon</code> source code</a>, which wrap the <code>Text</code> widget into a <code>Row</code>:</p>
  
  <pre><code>child: Row(
    mainAxisSize: MainAxisSize.min,
      children: &lt;Widget&gt;[
        icon,
        const SizedBox(width: 8.0),
        label,
      ],
  ),
  </code></pre>
  
  <p>So, I wrap the "Long Text" Widget into a <code>Flexible</code> widget with <code>flexFit</code> set to <code>loose</code>, and set the <code>overflow</code> property of the <code>Text</code> widgets to <code>ellipsis</code>:</p>
  
  <pre><code>  @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          color: Colors.lime,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Container(
                color: Colors.yellow,
                child: FlatButton.icon(
                  label: Flexible(
                    fit: FlexFit.loose,
                    child: Container(
                      color: Colors.blue,
                      child: Text(
                        'Short Text',
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ),
                  icon: Icon(Icons.done),
                  onPressed: () {},
                ),
              ),
              Container(
                color: Colors.orange,
                child: FlatButton.icon(
                  label: Flexible(
                    fit: FlexFit.loose,
                    child: Container(
                      color: Colors.red,
                      child: Text(
                        'Long Long Long Long Looong Loooooooooooong',
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ),
                  icon: Icon(Icons.done),
                  onPressed: () {},
                ),
              ),
            ],
          ),
        ),
      );
    }
  </code></pre>
  
  <p><img src="https://i.imgur.com/uCujUIn.png" alt="Result of above code"></p>
  
  <p>But in the "Long Text" widget, since some text has already been turned into ellipsis, I would like to reduce the width of the <code>Text</code> more. Specifically, I don't want the red space after the "...". Below is the ideal layout:
  <img src="https://i.imgur.com/lke37H4.png" alt="Ideal result"></p>
  
  <p>Any way to achieve this?</p>
  
  <p>EDIT: To clarify, the text of the <code>FlatButton</code> depends on user content, so the layout needs to be suitable for all text and all device sizes.</p>