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?
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.
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.
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.
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.
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)),
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With