Flutter Multiline for text

Question

All I need is my text to be multi-line. Am giving the property of maxLines but its still getting RenderFlex overflowed error to the right as the next is not going to 2nd line,

      Align( alignment: Alignment.bottomCenter,
      child: new ButtonBar(
        alignment: MainAxisAlignment.center,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.all(20.0),
            child: new Text(
              "This is a very bigggggggg text !!!",textDirection: TextDirection.ltr,
              style: new TextStyle(fontSize: 20.0, color: Colors.white),
              maxLines: 2,
            ),
          )
        ],
      ),
    )

I have fixed by removing the ButtonBar child – Vivek C A Dec 17 '18 at 09:15 — Vivek C A, Dec 17 '18 at 09:15
Wrap your Text Widget in a Flexible or Expanded Widget. – Shakeeb Siddiqui Mar 10 '19 at 11:43 — Shakeeb Siddiqui, Mar 10 '19 at 11:43

Tom O · Answer 1 · 2022-01-07T19:29:25.187

Short answer

All that is required for multi-line text, is that your Text() widgets' width is limited by a parent widget. For example:

SizedBox(
    width: 150,
    child: Text(
    "This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
    ),
),

Long answer

Minimal working example + explanation:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold( //Text widgets, multi-line or not, need a Scaffold widget somewhere up the widget tree.
        body: Row( //Widgets which help to display a list of children widgets are the 'culprit', they make your text widget not know what the maximum width is. In OP's example it is the ButtonBar widget.
          children: [
            Container( 
              width: 100, //This helps the text widget know what the maximum width is again! You may also opt to use an Expanded widget instead of a Container widget, if you want to use all remaining space.
              child: Center( //I added this widget to show that the width limiting widget doesn't need to be a direct parent.
                child: Text(
                  "This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Extra

You also mentioned maxlines. This property limits the maximum amount of lines. If this is what you want, I recommend you also play with the overflow property.

SizedBox(
  width: 100,
  child: Text(
    "This text is very very very very very very very very very very very very very very very very very very very very very very very very very long",
    maxLines: 2,
    overflow: TextOverflow.ellipsis,
  ),
),

UPDATE

I came across this video on the official Flutter channel which explains this issue quite well. They recommend using a LimitedBox widget.

This explanation is so good: precise, concise, correct. I wish we had official Flutter docs (guides / how-to's) written in this style. — Dvinubius, Feb 15 '21 at 19:09
If I use TextOverFlow.ellipsis and wrap the Text widget with a SingleChildScrollView, the text doesn't scroll. But if I remove the TextOverFlow.ellipsis the text scroll as expected. Is it possible to use TextOverFlow.ellipsis and SingleChildScrollView? — Richardd, Feb 17 '21 at 23:32
Better approach to use constraints https://stackoverflow.com/a/55431670/7429464 — FindOutIslamNow, May 14 '21 at 05:33
What to do when `Text` is inside `Wrap` widget? Nothing seems to work in this case and text goes in single long line causing overflow — Muhammad Qasim, Jun 24 '22 at 05:37

score 42 · Answer 2 · edited Nov 06 '20 at 09:17

42

Just wrap your text widget with Expanded as below

    Expanded(
      child: Text('data', maxLines: 4,
        overflow: TextOverflow.ellipsis,
        textDirection: TextDirection.rtl,
        textAlign: TextAlign.justify,),
    ),

edited Nov 06 '20 at 09:17

zepolyerf

1,098
3
16
35

answered Oct 03 '19 at 16:08

Danford Kija

574
6
15

1

I already voted it up, then I forgot how to do it and found this answer again. I can't vote up again so I decided to write a comment (maybe like this I will remember better ) Thanks! – Shalugin May 16 '23 at 21:46

Basel Abuhadrous · Answer 3 · 2020-10-02T09:23:36.013

try this:

Expanded(            
    child: Text(
      'a long text',
      overflow: TextOverflow.clip,
    ),
),

in my implementation I put this inside a row and surrounded it with sized boxes on each side so that I have some space between my elements, why using expanded you may ask, well it's used to take as much space as possible so the text would look good in portrait or landscape mode.

and here is a full example on how to make it even react vertically not just horizontally:

Card(
  child: InkWell(
    onTap: (){},
    child: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(
        children: <Widget>[
          SizedBox(
            height: 70, // default\minimum height
          ),
          Container(
            height: 44,
            width: 44,
            decoration: BoxDecoration(
                color: Colors.blue,
                borderRadius: BorderRadius.all(Radius.circular(22))),
          ),
          SizedBox(
            width: 15,
          ),
          Expanded(
            child: Text(
              'the very long title',
              overflow: TextOverflow.clip,
            ),
          ),
          SizedBox(
            width: 10,
          ),
          Text(
            'value', //some other text in the end of the card or maybe an icon instead
          ),
          SizedBox(
            width: 30,
          ),
        ],
      ),
    ),
  ),
)

score 16 · Answer 4 · edited Dec 17 '18 at 09:23

16

I think you forgot to add overflow type.

You can use something like this:

Text(
     "TOP ADDED",
     textAlign: TextAlign.justify,
     overflow: TextOverflow.ellipsis,
     style: TextStyle(fontSize: 18.0),
     maxLines: 2,)

edited Dec 17 '18 at 09:23

Nae

14,209
7
52
79

answered Dec 17 '18 at 09:17

Mohammed Mahmoud

1,138
10
14

textAlign setting ensured centering for multiple lines, separated with "\n" character. e.g. Text("line one\nlinetwo", textAlign: TextAlign.center) – Donna Nov 11 '22 at 19:34

score 11 · Answer 5 · answered Jul 11 '20 at 19:30

11

Use Expanded widget with column to achieve multiline text.

Expanded(child: 
 Column(crossAxisAlignment: CrossAxisAlignment.start ,
 children: [
            Text(food.title),
            Text(food.price)
           ]
))

answered Jul 11 '20 at 19:30

Mohd Danish Khan

1,044
11
12

score 8 · Answer 6 · answered Mar 16 '21 at 14:38

Just wrap the text widget in Flexible. As it only use space that it need. After maxLines, it just cut to ellipsis.

If you want unlimited lines, just remove maxLines attribute. With the help of Flexible, it uses space which widget needs.

Flexible(
  child: Text('Long Text', maxLines: 3,
    overflow: TextOverflow.ellipsis,
    textAlign: TextAlign.justify,
  ),
),

score 4 · Answer 7 · edited Nov 20 '20 at 22:01

4

Best way to handle this:

Expanded(
child: Text(document['content'],
textAlign: TextAlign.start,
overflow: TextOverflow.ellipsis,
maxLines: 20,
))

edited Nov 20 '20 at 22:01

Filippo Mazza

4,339
4
22
25

answered Aug 27 '20 at 06:58

Shahzad Rasool

41
1
3

score 2 · Answer 8 · edited Dec 21 '21 at 02:29

2

You can use this trick. Text( ''' This is very big text''' ), Just wrap a text around three single quotes and flutter will format a text as per its length . No need to use max lines and text field.

edited Dec 21 '21 at 02:29

TuGordoBello

4,350
9
52
78

answered May 29 '20 at 08:41

Saurabh pethani

88
2

1

works, as long as you add `\n` as line breaks in your string. Doesn't matter if you use tripple or normal quotes though. Can't understand all of the downvotes. – Throvn Oct 03 '21 at 17:28

score 1 · Answer 9 · answered Dec 17 '18 at 09:17

1

Maybe try using TextField:

new TextField(
  keyboardType: TextInputType.multiline,
  maxLines: 2,
)

answered Dec 17 '18 at 09:17

dragonfly02

3,403
32
55

harizh · Answer 10 · 2022-04-11T07:45:14.683

1

wrap your Text widget with AutoSizeText widget and also Flexible widget.

AutoSizeText adjust your text size as per the screen size
Flexible control your widget not to overflow outside

for get AutoSizeText you have to add dependency. auto_size_text: ^3.0.0 - Example

edited Apr 11 '22 at 07:45

answered Apr 11 '22 at 07:18

harizh

326
1
13

score 0 · Answer 11 · answered Dec 22 '22 at 07:35

0

Maxline is used for set how many lines you want to set or see.

Text(
     "Name Safal Bhatia",
     style: TextStyle(fontSize: 16),
     maxLines: 3,)

answered Dec 22 '22 at 07:35

Safal Bhatia

245
2
6

score 0 · Answer 12 · edited Jun 28 '23 at 07:43

you can use Text.rich to show your text in multi line or mansge the style for subTitle in your whole title.

This example will help you to understand what I mean:

Text.rich(
  TextSpan(
    text: 'Hello ',
    style: TextStyle(fontSize: 20),
    children: [
      TextSpan(
        text: 'world',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
      TextSpan(
        text: '!',
        style: TextStyle(color: Colors.red),
      ),
    ],
  ),
)


----------

        Text.rich(
          TextSpan(
            style: const TextStyle(
              fontSize: 12,
              fontWeight: FontWeight.w300
            ),
            children: [
              TextSpan(
                text: "set your paragraph here"
              ),
              const TextSpan(
                text: ("More....."),
                style: TextStyle(
                  color: Colors.indigoAccent
                )
              )
            ]
          )
        )

Flutter Multiline for text

12 Answers12

Linked