How do I stop my text field from growing horizontally?-CodePudding

I have a text field in a modal sheet that is wrapped with a column. When I type text in the text field it grows horizontally instead of vertically, I've tried setting maxLines to null but it still behaves the same way. I want it to expand vertically.

showModalBottomSheet(
        isScrollControlled: true,
        context: context,
        builder: (BuildContext context) {
          return Padding(
            padding: EdgeInsets.only(
                bottom: MediaQuery.of(context)
                    .viewInsets
                    .bottom), //keeps above keyboard
            child: SizedBox(
              height: 150,
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  createSpace(1),
                  const TextField(
                    keyboardType: TextInputType.multiline,
                    autofocus: true,
                    maxLines: null,
                    decoration: InputDecoration(
                      contentPadding: EdgeInsets.only(left: 10),
                      border: InputBorder.none,
                      hintText: "Title",
                    ),
                  ),
                  const TextField(
                    style: TextStyle(height: 1),
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      contentPadding: EdgeInsets.only(left: 20),
                      hintText: "Description",
                    ),
                  ),
                  TextButton(onPressed: () {}, child: const Text("Save"))
                ],
              ),
            ),
          );
        });

CodePudding user response：

Just add below code in TextField.

minLines: 1,
maxLines: null,

CodePudding user response：

You need to set Size box width also. so that the line takes a constant width then goes to next line. you can also fix minLines and maxLines in TextField that can help to take max line

showModalBottomSheet(
            isScrollControlled: true,
            context: context,
            builder: (BuildContext context) {
              return Padding(
                padding: EdgeInsets.only(
                    bottom: MediaQuery.of(context)
                        .viewInsets
                        .bottom), //keeps above keyboard
                child: SizedBox(
                  height: 150,
                  width: MediaQuery.of(context).size.width,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      createSpace(1),
                      const TextField(
                        keyboardType: TextInputType.multiline,
                        autofocus: true,
                        minLines: 1,
                        maxLines: 3,
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.only(left: 10),
                          border: InputBorder.none,
                          hintText: "Title",
                        ),
                      ),
                      const TextField(
                        style: TextStyle(height: 1),
                        decoration: InputDecoration(
                          border: InputBorder.none,
                          contentPadding: EdgeInsets.only(left: 20),
                          hintText: "Description",
                        ),
                      ),
                      TextButton(onPressed: () {}, child: const Text("Save"))
                    ],
                  ),
                ),
              );
            });