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.

Demo

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

Tags:

Dart

Flutter