Search code examples
dartflutter

Flutter- wrapping text


I want wrap text as text grows. I searched through and tried wrap with almost everything but still text stays one line and overflows from the screen. Does anyone know how to achieve this? Any help is highly appreciated!

Positioned(
    left: position.dx,
    top: position.dy,
    child: new Draggable(
      data: widget.index,
      onDragStarted: widget.setDragging,
      onDraggableCanceled: (velocity, offset) {
        setState(() {
          position = offset;
          widget.secondCallback(offset, widget.index);
          widget.endDragging();
        });
      },
      child: new GestureDetector(
        onTap: () {
          widget.callback(widget.caption, widget.index);
        },
        child: new Text(
            widget.caption.caption,
            style: new TextStyle(
              color: widget.caption.color,
              fontSize: widget.caption.fontSize,
            ),
          ),
      ),
      feedback: new Material(
        type: MaterialType.transparency,
        child: new Text(
          widget.caption.caption,
          style: new TextStyle(
              color: widget.caption.color,
              fontSize: widget.caption.fontSize),
          softWrap: true,
        ),
      ),
    ));

Solution

  • In a project of mine I wrap Text instances around Containers. This particular code sample features two stacked Text objects.

    Here's a code sample.

        //80% of screen width
        double c_width = MediaQuery.of(context).size.width*0.8;
    
        return new Container (
          padding: const EdgeInsets.all(16.0),
          width: c_width,
          child: new Column (
            children: <Widget>[
              new Text ("Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 Long text 1 ", textAlign: TextAlign.left),
              new Text ("Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2, Long Text 2", textAlign: TextAlign.left),
            ],
          ),
        );
    

    [edit] Added a width constraint to the container