CODEWITHSUNDEEP
flutter
user213294
user213294

Reputation: 103

How to wrap a row of texts?

I have two Text widgets inside a Row. I want to show the text widgets one after another, and wrap the second one to the next line if it doesn't fit in the first line.

I've tried Flexible, Wrap, and what not. I can't seem to get it working.

Row(
    children: <Widget>[
        Text('This is some text.'),
        Text('Another piece of text.')
    ]
);

I want the output to look something like this (the screen edges are indicated by |):

|This is some text. Another |
|piece of text.             |

The best I could get was the following:

|This is some  Another piece|
|text.         of text.     |

Edit: Thanks for replies, everyone. I've tried RichText too, and it works, but I want to bind more than one gesture to each TextSpan element, which cannot be done easily with RichText. I'm about to create a question on that, but stackoverflow doesn't allow me to create more than one question in 90 minutes.

Upvotes: 1

Views: 892

Answers (3)

Dhaval Patel
Dhaval Patel

Reputation: 409

The Wrap Widget will either keep the two Texts on the same line or put the second Text on the next line if there's overflow.

Wrap(
  children: [
    Text(
      'This is some text.',
    ),
    Text(
      'Another piece of text.',
    ),
  ],
),

Upvotes: 1

Wubbalubbadubdub
Wubbalubbadubdub

Reputation: 2485

UPDATED ANSWER

The first thing you are doing wrong is using Row to put one text widget under another text.

|This is some text. Another | |piece of text. |

This is the desired UI are you are trying to achieve right? So From your question, it is clear that you want two text widget one under another.

so this code will work for you. replace Row with Column widget like this. If you want to continue with Row each of your text will wrap but not one text after another. here is the working code. I have putted two text to show you that how they wrap one after another. Checkout the image below to see the result

body: Center(
    child: Container(
      color: Colors.amberAccent,
      width: 200,
      height: 200,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: <Widget>[
            Flexible(
              fit: FlexFit.tight,
              child: Text(
                'This is some text.long text more long Text, even more long text',
                style: TextStyle(color: Colors.white, fontSize: 20.0),
              ),
            ),
            Flexible(
              fit: FlexFit.tight,
              child: Text(
                'Another piece of text.not so long text yet needs to be a liitle long text',
                style: TextStyle(color: Colors.white, fontSize: 20.0),
              ),
            )
          ],
        ),
      ),
    ),
  ),

here is the screenshot enter image description here

Upvotes: 1

Pablo Barrera
Pablo Barrera

Reputation: 10983

You can achieve that using the RichText widget:

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.grey,
    appBar: AppBar(),
    body: RichText(
      text: TextSpan(
        children: [
          TextSpan(text: "This is some text."),
          TextSpan(text: "Another piece of text. Another piece of text. Another piece of text. Another piece of text."),
        ],
      ),
    ),
  );
}

The RichText widget displays text that uses multiple different styles. The text to display is described using a tree of TextSpan objects, each of which has an associated style that is used for that subtree. The text might break across multiple lines or might all be displayed on the same line depending on the layout constraints.

RichText

Upvotes: 0

Related Questions