Ali
Ali

Reputation: 45

Text Not showing on second line inside column -Flutter

I am struggling to show long text which is an address in string format. And it can take one or two or more lines, i have tried every solution to show text completely but every time it overflows. I have used flexible, expandable and all text properties like soft wrap but it is not working. I have to show this column inside ListTile.

showPickedDropoffLocations() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment
          .start, //meant to align elements to the left - seems to be working
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        SizedBox(height: 5),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: const <Widget>[
              Icon(
                Icons.pin_drop,
                color: Colors.pink,
                size: 24.0,
                
              ),
              Text("Pickup Location"),
            ]),

        Container(
            height: 50,
            
            child: Text(pickedAddress, style: TextStyle(), softWrap: true)),
        

        Center(
          child: Column(
            children: [
              Text('.'),
              Text('.'),
              Text('.'),
            
            ],
          ),
        ),
        SizedBox(height: 5),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: const <Widget>[
              Icon(
                Icons.pin_drop,
                color: Colors.green,
                size: 24.0,
                
              ),
              Text("DropOff Location"),
            ]),
        
        Container(
            
            child: Text(dropOffAddress, style: TextStyle(), softWrap: true)),
      ],
    );
  }

When i try to use flexible this error occurs

Error 
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 2343): The following assertion was thrown during performLayout():
I/flutter ( 2343): RenderFlex children have non-zero flex but incoming width constraints are unbounded.
I/flutter ( 2343): When a row is in a parent that does not provide a finite width constraint, for example if it is in a     
I/flutter ( 2343): horizontal scrollable, it will try to shrink-wrap its children along the horizontal axis. Setting a      
I/flutter ( 2343): flex on a child (e.g. using Expanded) indicates that the child is to expand to fill the remaining
I/flutter ( 2343): space in the horizontal direction.
I/flutter ( 2343): These two directives are mutually exclusive. If a parent is to shrink-wrap its child, the child
I/flutter ( 2343): cannot simultaneously expand to fit its parent.
I/flutter ( 2343): Consider setting mainAxisSize to MainAxisSize.min and using FlexFit.loose fits for the flexible
I/flutter ( 2343): children (using Flexible rather than Expanded). This will allow the flexible children to size
I/flutter ( 2343): themselves to less than the infinite remaining space they would otherwise be forced to take, and
I/flutter ( 2343): then will cause the RenderFlex to shrink-wrap the children rather than expanding to fit the maximum      
I/flutter ( 2343): constraints provided by the parent.
I/flutter ( 2343): If this message did not help you determine the problem, consider using debugDumpRenderTree():
I/flutter ( 2343):   https://flutter.dev/debugging/#rendering-layer
I/flutter ( 2343):   http://api.flutter.dev/flutter/rendering/debugDumpRenderTree.html
I/flutter ( 2343): The affected RenderFlex is:
I/flutter ( 2343):   RenderFlex#7501a relayoutBoundary=up21 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE(creator: 
Row ← Column ← Row ← Container ← Column ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _ListTile ← MediaQuery ← Padding ← SafeArea ← Semantics ← ⋯, parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size), constraints: BoxConstraints(unconstrained), size: MISSING, direction: horizontal, mainAxisAlignment: start, mainAxisSize: max, crossAxisAlignment: center, textDirection: ltr, verticalDirection: down)
I/flutter ( 2343): The creator information is set to:
I/flutter ( 2343):   Row ← Column ← Row ← Container ← Column ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _ListTile      
I/flutter ( 2343):   ← MediaQuery ← Padding ← SafeArea ← Semantics ← ⋯
I/flutter ( 2343): The nearest ancestor providing an unbounded width constraint is: RenderFlex#0f869 relayoutBoundary=up19 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE:
I/flutter ( 2343):   creator: Row ← Container ← Column ← DefaultTextStyle ← AnimatedDefaultTextStyle ← _ListTile ←
I/flutter ( 2343):     MediaQuery ← Padding ← SafeArea ← Semantics ← _PointerListener ← Listener ← ⋯
I/flutter ( 2343):   parentData: offset=Offset(0.0, 0.0); flex=null; fit=null (can use size)
I/flutter ( 2343):   constraints: BoxConstraints(0.0<=w<=295.4, 0.0<=h<=Infinity)
I/flutter ( 2343):   size: MISSING
I/flutter ( 2343):   direction: horizontal
I/flutter ( 2343):   mainAxisAlignment: start
I/flutter ( 2343):   mainAxisSize: max
I/flutter ( 2343):   crossAxisAlignment: center
I/flutter ( 2343):   textDirection: ltr
I/flutter ( 2343):   verticalDirection: down
I/flutter ( 2343): See also: https://flutter.dev/layout/
I/flutter ( 2343): If none of the above helps enough to fix this problem, please don't hesitate to file a bug:
I/flutter ( 2343):   https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter ( 2343):

Upvotes: 2

Views: 1480

Answers (4)

Mehdi
Mehdi

Reputation: 170

Put the Text widget in the Expanded widget

   Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Icon(
            Icons.pin_drop,
            color: Colors.green,
            size: 24.0,
          ),
          Expanded( // <-- add this widget here
              child: Text( // <-- Text widget here
                  "Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a documenta seaw")),
        ]),

enter image description here

Upvotes: 1

ming hoe
ming hoe

Reputation: 1

  child: Text(pickedAddress, maxLines: 4,
    overflow: TextOverflow.ellipsis,
    textDirection: TextDirection.rtl,
    textAlign: TextAlign.justify,),

Upvotes: 0

Pradeep Tintali
Pradeep Tintali

Reputation: 226

You can wrap your Text Widget with Flexible widget.

Flexible(
child:Text("Your very very long text"),
),

Upvotes: 5

ming hoe
ming hoe

Reputation: 1

you need to use \n for next line.

For example: String address = 'My text address.\nThis line wraps to the next.\nAnother line.';

Upvotes: -1

Related Questions