CODEWITHSUNDEEP
flutterflutter-layout
Raghu Mudem
Raghu Mudem

Reputation: 6973

How to set Flutter text max length value?

I am using Flutter programming. I need to display a title and a button next to the title. If the text length is less button also should display next to the text. If text length is more i want to fix the text length as maximum 200px and need to show the button next to the title.

I am using the below code. And working fine with the less text length.

Problem is: If text length is more, then my button is moving out of screen. You can see the behaviour in the below attached image.

          Row(
            children: <Widget>[
                    Container(
                      child: RichText(
                        overflow: TextOverflow.ellipsis,
                        strutStyle: StrutStyle(fontSize: 12.0),
                        text: TextSpan(
                            style: TextStyle(color: Colors.white), text: model.title),
                      ),
                    ),

                    Text("My Button"),
                  ],
                )

enter image description here

Upvotes: 0

Views: 11349

Answers (4)

Cihan Kalmaz
Cihan Kalmaz

Reputation: 959

   String addressText = userAddress.address.toString();

   if(addressText.length > 22)
   addressText = addressText.substring(0,22);

You can check length and split string if exceeds max length.

Upvotes: 0

Amir Samyan
Amir Samyan

Reputation: 29

You can put maximum characters

text.substring(0,150)

Upvotes: 2

Darshan
Darshan

Reputation: 11679

I think there's no maxLength property for RichText and Text widget. If you are using RichText class, you'll have maxLines property that can be used. I tried to recreated your case and wrapped RichText widget with Flexible widget that lets the child widget to use only the minimum available space. But I wasn't able to replicate the error you mentioned. The long text I used gets ellipsis and the button doesn't go out of the screen. Note that I also used maxLines property which if you set to 2, will wrap the long text in new line without moving away the button and the long text will be shown as ellipsis. Sample working code below:

body: Center(
          child: Row(
            children: <Widget>[
              Container(
                child: Flexible(
                  child: RichText(
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    strutStyle: StrutStyle(fontSize: 12.0),
                    text: TextSpan(
                        style: TextStyle(color: Colors.white), text: 'I am using Flutter programming. I need to display a title and a button next to the title. If the text length is less button also should display next to the text. If text length is more i want to fix the text length as maximum 200px and need to show the button next to the title.'),
                  ),
                )

              ),

              Text("My Button"),
            ],
          )
        )

enter image description here

If you set maxLines to 1, the long text will wrap in ellipsis.

Hope this helps.

Upvotes: 2

Manpreet Singh Pandher
Manpreet Singh Pandher

Reputation: 257

you can use Expanded or give fixed width to container of rich text, like this with Expanded widget:-

Row(
                            children: <Widget>[
                              Expanded(
                                child: RichText(
                                  overflow: TextOverflow.ellipsis,
                                  strutStyle: StrutStyle(fontSize: 12.0),
                                  text: TextSpan(
                                      style: TextStyle(color: Colors.white), text: model.title),
                                ),
                              ),

                              Text("My Button"),
                            ],
                          )

Upvotes: -1

Related Questions