Flutter TextFormField pointer overlapping the text

Question

When using TextFormField in Flutter and having the form prefilled with text, when I tap somewhere on it in order to start editing the text, I get the little rain drop pointer right over the text:

I expect it to appear a little bit below the form. Something like this:

Here is the code:

                  Container(
                    height: 40.0,
                    child: TextFormField(
                      style: TextStyle(
                        fontSize: 17,
                      ),
                      controller: serverAddressController,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(
                          borderRadius: new BorderRadius.circular(10.0),
                        ),
                      ),
                      onChanged: (value) {
                        serverAddress = value;
                        changesSaved = false;
                      },
                      textInputAction: TextInputAction.next,
                      onFieldSubmitted: (_) {
                        FocusScope.of(context)
                            .requestFocus(daysBackFocusNode);
                      },
                    ),
                  ),

How do I do it?

Answer 1

you've set Container height to low but didn't reduce content paddings just add contentPadding property

decoration: InputDecoration(
  contentPadding: EdgeInsets.only(left: 16, right: 16),
  border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(16.0),
  ),
),