Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter - multiline label inside row

Layout is defined as follows:

 var cardLayout = Flexible(
              child: new Container(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Padding(
                      child: Row(children: <Widget>[
                        Text(categoryIcon,style: TextStyle(color: Colors.lightBlue, fontFamily: 'Fontawesome', fontWeight: FontWeight.normal)),
                        Text("   " + categoryName, maxLines: 3, style: TextStyle(color: Colors.lightBlue, fontWeight: FontWeight.normal)) //Overflow!!
                      ]),
                      padding: EdgeInsets.only(bottom: 10.0,left: 10.0, top: 10.0),
                    ),
                    Padding(
                      child: Text(title, maxLines: 3, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.normal, fontSize: 16)),
                      padding: EdgeInsets.only(bottom: 10.0,left: 10.0, top: 10.0),
                    ),
                    Padding(
                      child: new Text(address, style: TextStyle(fontStyle: FontStyle.normal)),
                      padding: EdgeInsets.only(bottom: 15.0,left: 10.0, top: 10.0),
                    ),

                    Visibility(
                    child: Padding(
                      child: new Text("⬤   " + statusName, style: TextStyle(fontStyle: FontStyle.normal,color:HexColor(statusColor))),
                      padding: EdgeInsets.only(bottom: 15.0,left: 10.0, top: 10.0),
                    ),
                      visible: type == ResponseMessageType.MESSAGE_TYPE_EVENT|| type == ResponseMessageType.MESSAGE_TYPE_MY_EVENT,
                    )
                  ],
                ),
              )
          );

I don't understand why category label is not multiline. It overflows (I added comment in pasted code to show wchich label I mean). It seems problem is Row. How to keep Row, but make label multiline?

like image 608
user1209216 Avatar asked Mar 07 '19 07:03

user1209216


People also ask

How do you write multiple text in a row in flutter?

In Flutter, if you need to design single line with multiple styles then it can be done by using RichText widget with TextSpan . RichText widget displays text with different styles. Different text to display is represented using a tree of TextSpan widgts.

How do you wrap text in a row in flutter?

Here's how you wrap text on overflow in Flutter:Step 1: Make sure your Text widget is inside the Row widget. Step 2: Wrap your Text widget inside the Expanded widget. Step 3: Run your app.

How do you auto new line if a text overflows flutter?

wrap your text with Flexible() widget and add the overflow attribute of the Text() with TextOverflow. visible and you are ready to go. Save this answer.

How do you break a text flutter?

Backward slash also known as backslash with small n character is used to divide a line from between in Flutter. Sometimes we have so much text in flutter mobile application and all the text seems to pushing each other.


1 Answers

Simpy Wrap Text widget with - Flexible to make it Multi-line.

 Flexible(
                child: Text("   " + categoryName,
                    maxLines: 3,
                    style: TextStyle(
                        color: Colors.lightBlue,
                        fontWeight: FontWeight.normal)),
              ),
like image 146
anmol.majhail Avatar answered Oct 21 '22 12:10

anmol.majhail