How to set multilines for text?-CodePudding

So I have a translator widget that was taken from Google Translate and it all works fine. When the input text is translated, the results are in the form of text (not textfield). In the case where I write a long paragraph for translation, I could implement "keyboardType: TextInputType.multiline, maxLines: null," for textfield but I do not know how to do the same for text. Is there something for text widget too?

Currently, the translator widget looks like this:

I want the grey area to have multiple lines where I can scroll through it.

Code:

Widget build(BuildContext context) {
    return Container(
      height: 350.0,
      color: Colors.white,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: 16.0),
              child: TextField(
                keyboardType: TextInputType.multiline,
                maxLines: null,
                focusNode: this.widget.focusNode,
                controller: this._textEditingController,
                onChanged: this._onTextChanged,
                decoration: InputDecoration(
                  contentPadding: const EdgeInsets.symmetric(vertical: 10),
                  border: InputBorder.none,
                  suffixIcon: RawMaterialButton(
                    onPressed: () {
                      if (this._textEditingController.text != "") {
                        this.setState(() {
                          this._textEditingController.clear();
                          this._textTranslated = "";
                        });
                      } else {
                        this.widget.onCloseClicked(false);
                      }
                    },
                    child: new Icon(
                      Icons.close,
                      color: Colors.grey,
                    ),
                    shape: new CircleBorder(),
                  ),
                ),
              ),
            ),
          ),
          Divider(),
          Flexible(
            child: Container(
              color: Colors.grey,
              margin: EdgeInsets.only(left: 16.0),
              child: Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  this._textTranslated,
                  softWrap: true,
                  style: TextStyle(color: Colors.blue[700], fontSize: 20),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

CodePudding user response：

You can wrap your Text in a SingleChildScrollView:

Flexible(
  child: SingleChildScrollView(
    child: Container(
      color: Colors.grey,
      margin: EdgeInsets.only(left: 16.0),
      child: Align(
        alignment: Alignment.centerLeft,
        child: Text(
          this._textTranslated,
          softWrap: true,
          style: TextStyle(color: Colors.blue[700], fontSize: 20),
        ),
      ),
    ),
  ),
),