FlatButton with Text ellipsis overflowed

Question

I try to use an ellipsis when the Text of a FlatButton overflows.

It works with a normal FlatButton but not with a FlatButton.icon. I would appreciate an explanation.

void main() => runApp(Test());

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        // bottomNavigationBar: BottomAppBar(child: widgetOk()),
        bottomNavigationBar: BottomAppBar(child: widgetNotOk()),
      ),
    );
  }
}

Widget widgetOk() {
  return Row(
    children: <Widget>[
      Flexible(
        child: FlatButton(
          child: Text('0123456789' * 10, overflow: TextOverflow.ellipsis),
          onPressed: () {},
        ),
      ),
      Flexible(
        child: FlatButton(
          child: Text('0123456789' * 10, overflow: TextOverflow.ellipsis),
          onPressed: () {},
        ),
      ),
    ],
  );
}

Widget widgetNotOk() {
  return Row(
    children: <Widget>[
      Flexible(
        child: FlatButton.icon(
          icon: Icon(Icons.bug_report),
          label: Text('0123456789' * 10, overflow: TextOverflow.ellipsis),
          onPressed: () {},
        ),
      ),
      Flexible(
        child: FlatButton.icon(
          icon: Icon(Icons.bug_report),
          label: Text('0123456789' * 10, overflow: TextOverflow.ellipsis),
          onPressed: () {},
        ),
      ),
    ],
  );
}

Answer 1

You can wrap label with Flexible to see the ellipsis take effect.

Working code below:

Flexible(
        child: FlatButton.icon(
          icon: Icon(Icons.bug_report),
          label: Flexible(
              child: Text('0123456789' * 10, overflow: TextOverflow.ellipsis)),
          onPressed: () {},
        ),
      ),
      Flexible(
        child: FlatButton.icon(
          icon: Icon(Icons.bug_report),
          label: Flexible(
            child: Text('0123456789' * 10, overflow: TextOverflow.ellipsis),
          ),
          onPressed: () {},
        ),
      ),