CODEWITHSUNDEEP
dartflutter
Pacane
Pacane

Reputation: 21471

How do I make a Text widget wrap long text into multiple lines?

I'm using a Stepper widget and I'm using a Text widget as the title parameter.

The string I use for my text is long, and I'd like it to wrap the text in multiple lines. How can I do that?

Here's the code I used to build this:

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Stepper(
          currentStep: currentStepIndex,
          onStepContinue: () => setState(() => currentStepIndex++),
          onStepTapped: (int index) => setState(() => currentStepIndex = index),
          steps: questions
              .map((String q) => Step(
                    title: Text(q),
                    content: QuestionWidget(),
                  ))
              .toList(),
        ),
      );

Here's what it currently looks like: enter image description here

Upvotes: 10

Views: 34070

Answers (4)

Mahesh Jamdade
Mahesh Jamdade

Reputation: 20221

you can make use of the built in Expanded Widget that takes the available space and switches to multiline if theres no space available horizontally/vertically it mainly depends on the parent widget. if the expanded widget is under row it will take the available space horizontally and if its under Column it will take the available space vertically. heres the little code snippet showing the difference with output.

Without Expanded it breaks the Screen

    Center(
       child: Row(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             Text( // without expanded Widget breaks on right
                 'Hello World This is some long text,this will break the screen for sure')
           ]),
     );

With Expanded Widget switches to multiline

   Center(
        child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: Text(
                    'Hello World This is some long text,this wont break screen trust me,Some More Long tesxt a little more and more and more  and more......                     '),
              )
            ]),
      ));

Heres the Output With and Without expanded Widget

Upvotes: 3

rizentium
rizentium

Reputation: 1132

Use flexible if you just wanna make multiple lines:

Flexible (child: Text('Some text here'))

Upvotes: 27

Vinoth Kumar
Vinoth Kumar

Reputation: 13431

This might not be the best solution but this is the only thing working for me.

Surround the Text widget with a Container and set the maximum width of it based on Screen size.

Screen size - 84 seems to be the minimum value to avoid overflow. I've tested it on 2 devices and is working fine.

steps: widget.questions
  .map(
    (String q) => Step(
      title: new Container(
        constraints: new BoxConstraints(
          maxWidth: MediaQuery.of(context).size.width - 84),
        child: Text(q),
      ),
      content: new Container(),
    ),
  )
  .toList(),

Upvotes: 25

Tree
Tree

Reputation: 31351

Here is the softWrap feature

child: Text("text",softWrap: true,),

Upvotes: 4

Related Questions