Flutter- wrapping text

Question

I want wrap text as text grows. I searched through and tried wrap with almost everything but still text stays one line and overflows from the screen. Does anyone know how to achieve this? Any help is highly appreciated!

Positioned(
    left: position.dx,
    top: position.dy,
    child: new Draggable(
      data: widget.index,
      onDragStarted: widget.setDragging,
      onDraggableCanceled: (velocity, offset) {
        setState(() {
          position = offset;
          widget.secondCallback(offset, widget.index);
          widget.endDragging();
        });
      },
      child: new GestureDetector(
        onTap: () {
          widget.callback(widget.caption, widget.index);
        },
        child: new Text(
            widget.caption.caption,
            style: new TextStyle(
              color: widget.caption.color,
              fontSize: widget.caption.fontSize,
            ),
          ),
      ),
      feedback: new Material(
        type: MaterialType.transparency,
        child: new Text(
          widget.caption.caption,
          style: new TextStyle(
              color: widget.caption.color,
              fontSize: widget.caption.fontSize),
          softWrap: true,
        ),
      ),
    ));

Fiury · Answer 1 · 2020-12-04T14:37:29.543

529

The Flexible does the trick

new Container(
       child: Row(
         children: <Widget>[
            Flexible(
               child: new Text("A looooooooooooooooooong text"))
                ],
        ));

This is the official doc https://flutter.dev/docs/development/ui/layout#lay-out-multiple-widgets-vertically-and-horizontally on how to arrange widgets.

Remember that Flexible and also Expanded, should only be used within a Column, Row or Flex, because of the Incorrect use of ParentDataWidget.

The solution is not the mere Flexible

edited Dec 04 '20 at 14:37

answered Mar 21 '19 at 23:55

Fiury

5,540
2
10
9

3

Using Row and column for a single child widget isnt a good Idea – Mahesh Jamdade Apr 13 '20 at 03:52
2

This also can be substituted with `Expanded()`, but `Expanded()` makes the child fill the rest of the available space. It can be observed in the Flutter's Inspector tool, to understand better. – Konstantin Kozirev Dec 01 '20 at 20:17
1

I used the `Flexible()` widget and it wordked. You should edit your answer then it would be the accepted solution. – Riad Rekab Dec 03 '20 at 13:18
The Flexible does the trick, but the Container allows you to add a padding. This is the official doc https://flutter.dev/docs/development/ui/layout#lay-out-multiple-widgets-vertically-and-horizontally on how to arrange widgets, as @KonstantinKozirev said you can use Expanded as well. – Fiury Dec 04 '20 at 14:29
This throws an incorrect ParentDataWidget error when the Text is nested within a container so itt's Container -> Flexible -> Text as Flexible can only be used in Rows, Columns and Flex? – mLstudent33 Sep 20 '21 at 04:02
Unfortunately, both `Flexible` and `Expanded ` cause the text to take up all the remaining horizontal space in a row, even when after wrapping the bounding box around the text could be "shrunk" to fit the text. This may lead to an unexpected result if you're trying to center, within a column, a row containing wrapping text. – Chuck Batson Dec 24 '22 at 01:29
`Row -> Flexible -> Row -> Flexible -> Text` wont work . In this case I had to use maxWidth constraint – Aseem Aug 12 '23 at 23:35

Max Lambertini · Accepted Answer · 2018-08-20T13:22:29.220

149

In a project of mine I wrap Text instances around Containers. This particular code sample features two stacked Text objects.

Here's a code sample.

    //80% of screen width
    double c_width = MediaQuery.of(context).size.width*0.8;

    return new Container (
      padding: const EdgeInsets.all(16.0),
      width: c_width,
      child: new Column (
        children: <Widget>[
          new Text ("Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 ", textAlign: TextAlign.left),
          new Text ("Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2", textAlign: TextAlign.left),
        ],
      ),
    );

[edit] Added a width constraint to the container

edited Aug 20 '18 at 13:22

answered Aug 20 '18 at 12:46

Max Lambertini

3,583
1
19
24

1

Thank you for the help but still not working. I think it's something to do with stack or positioned or draggable. Because hierarchy is stack -> positioned -> draggable. Am I right? – Daibaku Aug 20 '18 at 13:15
You might try to force a fixed width to a container: I edited my answer. – Max Lambertini Aug 20 '18 at 13:20
1

Thank you so much it worked perfectly. You just made my day! – Daibaku Aug 20 '18 at 13:35
76

Try the Flexible widget instead. Hardcoding containers width should not be necessary. – Boni2k Aug 20 '18 at 13:47
2

it didn’t work i tried so many times with it. Do you have any idea? – Daibaku Aug 20 '18 at 14:53
1

Instead of setting a fixed width, you can use Expanded to make the container to expand to maximum width: Expanded( child: Container( child: Column( – Rico Chan Sep 19 '20 at 07:57
I think @Boni2k's answer is more... flexible. lol. the use of the Flexible widget make more sense – Satisfakshin Feb 22 '21 at 11:21
2

Perl forlks would say: "There's more than one way to do it". It served me well at the time, when Flutter was fairly new-ish. I'm glad there's now an official path. – Max Lambertini Feb 22 '21 at 12:49
this solution is only worked for me, others not. – kokemomuke Aug 18 '22 at 08:30

score 111 · Answer 3 · answered Oct 20 '19 at 05:56

111

Using Ellipsis

Text(
  "This is a long text",
  overflow: TextOverflow.ellipsis,
),

Using Fade

Text(
  "This is a long text",
  overflow: TextOverflow.fade,
  maxLines: 1,
  softWrap: false,
),

Using Clip

Text(
  "This is a long text",
  overflow: TextOverflow.clip,
  maxLines: 1,
  softWrap: false,
),

Note:

If you are using Text inside a Row, you can put above Text inside Expanded like:

Expanded(
  child: AboveText(),
)

answered Oct 20 '19 at 05:56

CopsOnRoad

237,138
77
654
440

In my case, this line caused the text to not wrap to next line and instead was just getting clipped: `overflow: TextOverflow.ellipsis` Changing it to `TextOverflow.fade` or removing the overflow tag completely solved the problem. Weird, but I guess if I need it to wrap, I shouldn't be using overflow anyways. – Hanzyusuf Mar 04 '23 at 05:59

score 103 · Answer 4 · answered Sep 13 '18 at 17:58

103

Use Expanded

 Expanded(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Text(_name, style: Theme.of(context).textTheme.subhead),
                new Container(
                  margin: const EdgeInsets.only(top: 5.0),
                  child: new Text(text),
                ),
              ],
            ),

answered Sep 13 '18 at 17:58

Piotr Badura

1,574
1
13
17

2

This. You could also use flexible without a flex (i.e. flex set to 1) in order to fill 100% of the available space. – Joel Broström Jan 14 '19 at 15:25
This should be the accepted answer. Reason: Google advertises the same solution: codelabs.developers.google.com/codelabs/flutter/#8 (see Chapter Wrap long lines) – DarkTrick May 07 '22 at 08:18

score 65 · Answer 5 · answered Apr 19 '19 at 23:42

65

If it's a single text widget that you want to wrap, you can either use Flexible or Expanded widgets.

Expanded(
  child: Text('Some lengthy text for testing'),
)

or

Flexible(
  child: Text('Some lengthy text for testing'),
)

For multiple widgets, you may choose Wrap widget. For further details checkout this

answered Apr 19 '19 at 23:42

KPandian

1,148
9
8

4

Both solutions are not working if Text widget is a child of Column. Any other suggestion? Thanks. – Kamlesh May 19 '21 at 08:33
3

Recommending `Flexible` or `Expanded` without a single mention of `Column` / `Row` is, in my opinion, harmful. – cubuspl42 Jun 17 '21 at 10:41

score 22 · Answer 6 · edited Aug 24 '20 at 09:46

22

Try Wrap widget to wrap text as text grows:

Example:

Wrap(
  direction: Axis.vertical, //Vertical || Horizontal
  children: <Widget>[
    Text(
      'Your Text',
      style: TextStyle(fontSize: 30),
    ),
    Text(
      'Your Text',
      style: TextStyle(fontSize: 30),
    ),
  ],
),

edited Aug 24 '20 at 09:46

Birju Vachhani

6,072
4
21
43

answered Apr 20 '19 at 13:33

ubaid iftikhar

231
4
6

7

This solution is not working if Text widget is a child of Column. Any other suggestion? Thanks – Kamlesh May 19 '21 at 08:35

Vaidehee Vala · Answer 7 · 2019-08-05T11:43:14.667

16

You Can Wrap your widget with Flexible Widget and than you can set property of Text using overflow property of Text Widget. you have to set TextOverflow.clip for example:-

Flexible
(child: new Text("This is Dummy Long Text",
 style: TextStyle(
 fontFamily: "Roboto",
 color: Colors.black,
 fontSize: 10.0,
 fontWeight: FontWeight.bold),
 overflow: TextOverflow.clip,),)

hope this help someone :)

edited Aug 05 '19 at 11:43

answered Aug 05 '19 at 11:06

Vaidehee Vala

324
3
7

This should be the correct answer. Less code and up to the point (actual purpose of the widget) – Jose Georges Jul 31 '20 at 15:54
4

Flexible is just dismiss all my text , not showing anything – elliotching Oct 18 '20 at 05:38
This solution worked perfectly for me! Simple and powerful! Thank you! – RedPelle Aug 23 '22 at 10:36

score 15 · Answer 8 · edited Oct 20 '20 at 11:00

Container(
  color: Color.fromRGBO(224, 251, 253, 1.0),
  child: ListTile(
    dense: true,
    title: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        RichText(
          textAlign: TextAlign.left,
          softWrap: true,
          text: TextSpan(children: <TextSpan>
          [
            TextSpan(text: "hello: ",
                style: TextStyle(
                    color: Colors.black, fontWeight: FontWeight.bold)),
            TextSpan(text: "I hope this helps",
                style: TextStyle(color: Colors.black)),
          ]
          ),
        ),
      ],
    ),
  ),
),

Please explain you code !! – CHIRAG SAHU Apr 21 '23 at 11:30 — CHIRAG SAHU, Apr 21 '23 at 11:30

score 7 · Answer 9 · answered Mar 18 '19 at 17:22

You can use Flexible, in this case the person.name could be a long name (Labels and BlankSpace are custom classes that return widgets) :

new Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
   new Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        new Flexible(
            child: Labels.getTitle_2(person.name,
            color: StyleColors.COLOR_BLACK)),
        BlankSpace.column(3),
        Labels.getTitle_1(person.likes())
      ]),
    BlankSpace.row(3),
    Labels.getTitle_2(person.shortDescription),
  ],
)

score 2 · Answer 10 · edited Aug 17 '23 at 13:05

2

Using SizedBox to hardcode the width, and softWrap to make new line of Text

SizedBox(
   width: 400,
   child: Text(
      "Really long text",
      softWrap: true,              
   ),
)

edited Aug 17 '23 at 13:05

ANDYNVT

531
4
19

answered Aug 13 '23 at 23:12

Ryan Sneyd

41
3

1

Thank you for contributing to the Stack Overflow community. This may be a correct answer, but it’d be really useful to provide additional explanation of your code so developers can understand your reasoning. This is especially useful for new developers who aren’t as familiar with the syntax or struggling to understand the concepts. **Would you kindly [edit] your answer to include additional details for the benefit of the community?** – Jeremy Caney Aug 15 '23 at 06:35

Flutter- wrapping text

10 Answers10

Linked