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

回答1:

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

回答2:

Use Expanded

 Expanded(
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Text(_name, style: Theme.of(context).textTheme.subhead),
                new Container(
                  margin: const EdgeInsets.only(top: 5.0),
                  child: new Text(text),
                ),
              ],
            ),

回答3:

Container(
                          color: Color.fromRGBO(224, 251, 253, 1.0),
                          child:ListTile(
                            dense: true,
                            title: Column(
                              crossAxisAlignment:CrossAxisAlignment.start,
                              children: <Widget>[
                                RichText(
                                  textAlign: TextAlign.left,
                                  softWrap: true,
                                  text: TextSpan(children: <TextSpan>
                                  [
                                    TextSpan(text:"hello: ",style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold)),
                                    TextSpan(text:"I hope this helps",style: TextStyle(color: Colors.black)),
                                  ]
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),

回答4:

You can use Container and set width, Text as child will wrap automatically

Container(
  width: 230.0,
  child: Text(
    "long text"
  ),
);