CODEWITHSUNDEEP
flutterdart
KeroppiMomo
KeroppiMomo

Reputation: 594

FlatButton.icon with Overflowing Text in Flutter

I would like to make a FlatButton with overflowing Text. To show the widget boxes, I placed Containers around some of the widgets.

  @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: () {},
              ),
            ),
          ],
        ),
      ),
    );
  }

Result of above code

To solve the overflow error and add ellipsis at the end of overflowing Texts, I've read the FlatButton.icon source code, which wrap the Text widget into a Row:

child: Row(
  mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      icon,
      const SizedBox(width: 8.0),
      label,
    ],
),

So, I wrap the "Long Text" Widget into a Flexible widget with flexFit set to loose, and set the overflow property of the Text widgets to ellipsis:

  @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: () {},
              ),
            ),
          ],
        ),
      ),
    );
  }

Result of above code

But in the "Long Text" widget, since some text has already been turned into ellipsis, I would like to reduce the width of the Text more. Specifically, I don't want the red space after the "...". Below is the ideal layout: Ideal result

Any way to achieve this?

EDIT: To clarify, the text of the FlatButton depends on user content, so the layout needs to be suitable for all text and all device sizes.

Upvotes: 4

Views: 5101

Answers (2)

NqbraL
NqbraL

Reputation: 573

Define a maxWidth property like this :

Container(
  color: Colors.red,
  constraints: BoxConstraints(
    maxWidth: 300 // set a correct maxWidth
  )
  child: Text(
    'Long Long Long Long Looong Loooooooooooong',
    overflow: TextOverflow.ellipsis,
  ),
)

You can use :

MediaQuery.of(context).size.width

to get the width of the screen of your phone/tablet.

Upvotes: 1

J. S.
J. S.

Reputation: 9635

You can use the padding property of the Container you have holding the Text widget to reduce the max size it will take:

Container(
  margin: EdgeInsets.only(left: 80, right: 80),
  color: Colors.red,
  child: Text('Long Long Long Long Long Long Long Long Text',
    softWrap: false,
    overflow: TextOverflow.ellipsis,
  ),
),

Upvotes: 0

Related Questions