Button overflow in ListView

Question

I have a basic Listview with a FlatButton as one of its children. When the button text is very large it overflows. See image.

How can I handle the overflow with ellipsis (or something else)?

Here's the build function:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
      children: <Widget>[
        FlatButton.icon(
            color: Colors.grey[200],
            onPressed: () {},
            icon: Icon(Icons.tune, color: Colors.grey),
            label: Text(
              'Lorem ipsum dolor sit amet consectetur adipiscing elit sed do ei',
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
            ))
      ],
    ));
  }

Answer 1

You could just wrap your Text widget in an Expanded widget.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          FlatButton.icon(
              color: Colors.grey[200],
              onPressed: () {},
              icon: Icon(Icons.tune, color: Colors.grey),
              label: Expanded(
                child: Text(
                  'Lorem ipsum dolor sit amet consectetur adipiscing elit sed do ei',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                ),
              ))
        ],
      ));
  }

Answer 2

You Need to Wrap your few Widgets With Flexible Widget -

Code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(
          children: <Widget>[
            Row(
              children: <Widget>[
                Flexible(
                  child: FlatButton.icon(
                      color: Colors.grey[200],
                      onPressed: () {},
                      icon: Icon(Icons.tune, color: Colors.grey),
                      label: Flexible(
                        child: Text(
                          'Lorem ipsum dolor sit amet consectetur adipiscing elit sed do ei',
                          maxLines: 1,
                          overflow: TextOverflow.ellipsis,
                        ),
                      )),
                ),
              ],
            )
          ],
        ));