Flutter - multiline label inside row

Question

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?

score 47 · Accepted Answer · answered Mar 07 '19 at 08:31

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)),
              ),

Flutter - multiline label inside row

1 Answers1

Linked