How do I make a TextField take up the entire screen

August 9, 2022

I am creating a notes application and using a text field with max lines set as null so the text can expand infinitely according to the text. The problem is that you can only start typing in the note when you select the text field due to its size I want to make it big enough to cover the entire screen for accessibility but I fear that the size of the text field may differ on each device which would ruin the entire point of making it fit the entire screen.

TextField(
                controller: _textController,
                style: const TextStyle(color: Colors.white),
                keyboardType: TextInputType.multiline,
                maxLines: null,
                decoration: const InputDecoration(
                  contentPadding:
                      EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                  border: InputBorder.none,
                  hintText: "Start typing your note...",
                  hintStyle: TextStyle(color: Colors.white),
                ),
              );

>Solution :

By wraping your TextField in a SizedBox with a height: double.infinity you can expand your TextField

SizedBox(
    height: double.infinity,
    child: TextField(
      controller: _textController,
      style: const TextStyle(color: Colors.white),
      keyboardType: TextInputType.multiline,
      maxLines: null,
      decoration: const InputDecoration(
        contentPadding:
        EdgeInsets.symmetric(horizontal: 10, vertical: 10),
        border: InputBorder.none,
        hintText: "Start typing your note...",
        hintStyle: TextStyle(color: Colors.white),
      )),
  ),