How to auto resize TextField when you type in long messages like whatsapp?

Here is my TextField code:

                    Row(
                      children: [
                        Expanded(
                          flex: 1,
                          child: Icon(
                            Icons.tag_faces,
                            color: Colors.grey,
                            size: 30,
                          ),
                        ),
                        Expanded(
                          flex: 8,
                          child: TextField(
                            controller: inputTextController,
                            style: TextStyle(
                                color: Colors.black
                            ),
                            decoration: InputDecoration(
                                border: InputBorder.none,
                                hintText: 'Type a message',
                                hintStyle: TextStyle(
                                  color: Color(0xff99999B),
                                )
                            ),
                          ),
                        ),
                        Expanded(
                          flex: 1,
                          child: IconButton(
                            icon: Icon(
                              Icons.camera_alt,
                              color: Colors.grey,
                              size: 30,
                            ),
                            padding: EdgeInsets.all(0),
                            onPressed: () {
                              //print(inputTextController.text);
                            },
                          ),
                        )
                      ],
                    ),

Tried using maxLines: null and it actually works for the text/message to auto entered but the textfield wouldn't resize vertically.

CodePudding user response：

Below is my implementation:

Container(
                  margin: const EdgeInsets.only(top: 20, bottom: 8),
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(2),
                  ),
                  constraints: BoxConstraints(
                    minWidth: MediaQuery.of(context).size.width,
                    maxWidth: MediaQuery.of(context).size.width,
                    minHeight: 25.0,
                    maxHeight: 100.0,
                  ),
                  child: Scrollbar(
                    child: TextField(
                      keyboardType: TextInputType.multiline,
                      textInputAction: TextInputAction.done,
                      onSubmitted: (value) {
                       
                      },
                      maxLines: null,
                      // focusNode: focusNode,
                      controller: _message,
                      style: const TextStyle(color: Colors.white),
                      decoration: const InputDecoration(
                        border: InputBorder.none,
                        contentPadding:
                            EdgeInsets.symmetric(horizontal: 13, vertical: 13),
                        hintText: "Message(optional)",
                        hintStyle:
                            TextStyle(color: Colors.white24, fontSize: 14),
                      ),
                    ),
                  ),
                ),