Reputation: 594
I would like to make a FlatButton
with overflowing Text
. To show the widget boxes, I placed Container
s 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: () {},
),
),
],
),
),
);
}
To solve the overflow error and add ellipsis at the end of overflowing Text
s, 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: () {},
),
),
],
),
),
);
}
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:
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
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
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