Flutter - How to limit text length
If you want to use your RichText Widget inside a Row and prevent the overflow with an ellipsis, you first have to wrap it inside a Flexible. The Flexible
shows the Row
that the RichText
can be shrinked.
After wrapping the RichText
inside a Flexible
, simply add overflow: TextOverflow.ellipsis
to your RichText
. Here a minimal example with a RichText
inside an Flexible
inside a Row
.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
padding: EdgeInsets.all(4.0),
color: Colors.lime,
width: 200.0,
child: Row(
children: <Widget>[
Flexible(
child: RichText(
overflow: TextOverflow.ellipsis,
strutStyle: StrutStyle(fontSize: 12.0),
text: TextSpan(
style: TextStyle(color: Colors.black),
text: 'A very long text :)'),
),
),
Container(
width: 100.0,
height: 100.0,
color: Colors.orangeAccent,
)
],
),
)),
),
);
}
}
There's no need of using RichText. Just add your Text a parameter of
overflow: TextOverflow.ellipsis
and the Wrap the Text widget with Flexible
Example:
Row(
children: <Widget>[
Icon(Icons.location_on, color: Colors.grey),
Flexible(
child: Text(propertyModel.propertyAddress, style: AppTextStyle.headerSmall2(context),
overflow: TextOverflow.ellipsis),
)
],
),
Try to set overflow property:
overflow: TextOverflow.ellipsis