Flutter - multiline label inside row

11,078

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)),
              ),
Share:
11,078
user1209216
Author by

user1209216

Updated on June 11, 2022

Comments

  • user1209216
    user1209216 almost 2 years

    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?