Textfield text is centered vertically when expands = true and using an OutlineInputBorder

Issue

When I set my textfield to expanded, the text is then centered vertically, whereas I want it to be at the top. If I remove OutlineInputBorder feature then will be at the top, but I want to keep border. I can't figure out a way to do this. Please help.

Here is the code:

SizedBox(
            height: MediaQuery.of(context).size.heigh * 0.5,
            width: MediaQuery.of(context).size.width * 0.85,
            child: TextField(
              controller: _controller,

              keyboardType: TextInputType.multiline,
              expands: true,
              maxLines: null,
              
              decoration: InputDecoration(
           
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(4)),
                  borderSide: BorderSide(width: 1),
                ),
              ),
            ),
          ),

Here is the result: enter image description here

Solution

Try below code hope its help to you.

  TextFormField(
        textCapitalization: TextCapitalization.words,
        minLines: 10,
        keyboardType: TextInputType.multiline,
        maxLines: null,
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: ' Description',
          hintText: ' Description Here',
        ),
      ),

Your result Screen ->

Answered By - Ravindra S. Patil