How to limit text length of a TextSpan widget

Question

I'm new to Flutter. How to limit text when I use TextSpan widget?

My code

Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.symmetric(vertical: 8.0), child: Row( children: <Widget>[ Expanded( flex: 2, child: Row( children: <Widget>[ Stack( children: <Widget>[ ClipRRect( borderRadius: BorderRadius.all(Radius.circular(8)), child: Image.asset( lastPlayedGame.imagePath, height: 60, width: 45, fit: BoxFit.cover, ), ), Positioned( left: 8, right: 8, top: 0, bottom: 0, child: Container( decoration: BoxDecoration( shape: BoxShape.circle, color: Colors.white, ), child: Icon( Icons.play_arrow, color: Colors.red, ), ), ), ], ), Padding( padding: const EdgeInsets.symmetric(horizontal: 12), child: RichText( text: TextSpan(children: [ TextSpan(text: lastPlayedGame.name, style: headingTwoTextStyle,), TextSpan(text: '\n'), TextSpan(text: "${lastPlayedGame.hoursPlayed} hours played", style: bodyTextStyle), ]), ), ) ], ), ), Expanded( child: GameProgressWidget(screenWidth: screenWidth, gameProgress: gameProgress), ), ], ), ); } }

When run on my Android device, I get an error:

A RenderFlex overflowed by 15 pixels on the right.

How to limit text length? Maybe check if text is maximum of screen, will show Assasin's Creed... (with dots maybe?)

NiklasPor · Accepted Answer · 2019-08-28 06:13:36Z

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, ) ], ), )), ), ); } }

Bensal · Accepted Answer · 2021-06-21 05:05:02Z

You can also try this if you want to customize it:

Text( _name.length > 10 ? _name.substring(0, 10)+'...' : _name, style: TextStyle( color: Colors.white, fontSize: 22, fontWeight: FontWeight.w500, ), ),

It displays the ellipsis if the length of the text is more than 10.

SilenceCodder · Accepted Answer · 2020-02-10 12:22:44Z

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), ) ], ),

Manjunath Rao · Accepted Answer · 2019-08-28 05:57:05Z

7

Try to set overflow property:

 overflow: TextOverflow.ellipsis

answered Aug 28, 2019 at 5:57

Manjunath Rao

4,3303 gold badges14 silver badges20 bronze badges

2 Comments

Bertho Joris Over a year ago

Hi @Munjunath I try but still same output

NiklasPor Over a year ago

This alone won't work inside a Row. @Bertho Joris you can have a look at my answer, I've added the missing information.

Syscall · Accepted Answer · 2021-03-24 11:01:16Z

@override Widget build(BuildContext context) { return Scaffold( body: Center( child: Container( padding: EdgeInsets.all(4.0), color: Colors.lime, height: 200, width: 200.0, child: Row( children: <Widget>[ Flexible( child: Text("Mais de 200 países criaram restrições à entrada de brasileiros por conta da nossa gestão da pandemia", overflow: TextOverflow.visible), ) ], ), ) ), ); }

Please add some notes or comment about how your answer help to solve OP's problem, also as I see your solution do not cover different screen sizes...

CodingEra · Accepted Answer · 2021-04-25 14:36:21Z

Adding more to the above-selected answer. if you want to show the dots (...) after a certain number of lines you can use the maxLines option.

Example:

.... .... Flexible( child: RichText( overflow: TextOverflow.ellipsis, maxLines: 2, // this will show dots(...) after 2 lines strutStyle: StrutStyle(fontSize: 12.0), text: TextSpan( style: TextStyle(color: Colors.black), text: 'A very long text :)' ), ), ), ..... .....

Collectives™ on Stack Overflow

How to limit text length of a TextSpan widget

6 Answers 6

Comments

1 Comment

Comments

2 Comments

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

Comments

2 Comments

1 Comment

1 Comment

Linked

Related