Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set multiline text using Text widget?

Tags:

flutter

dart

I'm trying to show a text in multiple lines, I mean like this:

"I am a text

and I finish here"

When I try to do that, I see a bar that says "Right Overflowed by 443 pixels". I have this UI structure:

@override
  Widget build(BuildContext context) {
    return Card(
        child: Scaffold(
          body: Row(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Column(
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.all(15.0),
                    child: Image.asset('images/place.png'),
                  )
                ],
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                      padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 15.0),
                      child: Text(
                        _placeCard.description,
                        style: TextStyle(),
                        softWrap: true
                      )
                  )
                ],
              ),

            ],
          ),
        )
    );
  }

Where _placeCard.description is something like : "nce thethethe the the the 1500s, when an unknown printer took a galley of type and scrambled it to"

Could someone help me or give me any feedback?

like image 258
Joseph Arriaza Avatar asked Aug 13 '18 13:08

Joseph Arriaza


People also ask

How do I display text on multiple lines?

The correct way to do things is using things made for the things you need. If you want a line break (enter), use <br> ; If you want to define a paragraph, use <p> . Show activity on this post. According to this, the <br> element is used to insert a line break without starting a new paragraph.


1 Answers

Wrap your Text widget using a Flexible widget.

like,

//updated read: aziza comment
  Flexible(//newly added
    child: Container(
      padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 15.0),
      child: Text(
        _placeCard.description,
        style: TextStyle(),
        softWrap: true
      ),
    )
  )

A simple example in below link:

https://gist.github.com/Blasanka/264510a0e7e5aaa151f02ada19fd466d

Update:

Above solution wraps the Text widget but in your question code snippet, the problem is you are using two Columns inside a Row and you havent added constraint. So, the easy solution to wrap those two Column widget using Flexible widgets.

like below,

Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Flexible(
      child: Column(
      //...
      ),
    ),
    Flexible(
      child: Column(
      //...
      ),
    ),
  ],
),
like image 56
Blasanka Avatar answered Oct 06 '22 01:10

Blasanka