I can align the hint text to the center with no issues, but when the user starts typing into the textbox, I can't seem to get it to align to the center.

When maxLines are set to 1, there isn't an issue, but when it is set to more than 1 (or to null in my case), then it seems to align to the top by default.

Screenshot1

Screenshot2

Is there any way to correct this?

                             Container(
                                width: screenWidth / 1.2,
                                height: 120,
                                padding:
                                    EdgeInsets.symmetric(horizontal: 0),
                                child: TextField(
                                  // autofocus: false,
                                  controller: postText,
                                  keyboardType: TextInputType.text,
                                  maxLines: 10,
                                  textAlign: TextAlign.center,
                                  textAlignVertical:
                                      TextAlignVertical.center,
                                  style: TextStyle(
                                    fontFamily: 'Michroma',
                                    color: selectedFont,
                                    fontSize: 12, // 12
                                  ),
                                  decoration: InputDecoration(
                                    hintText: '\n\nType  away !   :\n\n\n',
                                    hintStyle: TextStyle(
                                      color: fontColour,
                                      fontFamily: 'Michroma',
                                      fontWeight: FontWeight.bold,
                                      fontSize: 12,
                                    ),
                                    filled: true,
                                    fillColor: screenColour,
                                    contentPadding: EdgeInsets.symmetric(
                                      vertical: 8.0,
                                      horizontal: 10.0,
                                    ),
                                    border: OutlineInputBorder(
                                      borderRadius: BorderRadius.all(
                                        Radius.circular(20.0),
                                      ), // 32
                                    ),
                                    enabledBorder: OutlineInputBorder(
                                      borderSide: BorderSide(
                                        color: borderColour,
                                        width: 1.0,
                                      ),
                                      borderRadius: BorderRadius.all(
                                        Radius.circular(20.0),
                                      ), // 32
                                    ),
                                    focusedBorder: OutlineInputBorder(
                                      borderSide: BorderSide(
                                        color: borderColour,
                                        width: 2.0,
                                      ),
                                      borderRadius: BorderRadius.all(
                                        Radius.circular(20.0),
                                      ), // 32
                                    ),
                                  ),
                                ),
                              ),

CodePudding user response：

You need to delete \n\n expression in front of the hint text value because \n provides us to switch to a new line. In your case, you switch the line you in two times. That is why the hint text is not appearing where you type.

decoration: InputDecoration(
              hintText: 'Type  away !   :', <--- here
              hintStyle: TextStyle(
                             color: fontColour,
                             fontFamily: 'Michroma',
                             fontWeight: FontWeight.bold,
                                      fontSize: 12),

When you remove that expression, probably it will not be in the center. so you can center it by doing following;

child: TextField(
            controller: postTextController,
            keyboardType: TextInputType.multiline,
            textAlign: TextAlign.center,
            maxLines: null,
            expands: true, 
            textAlignVertical: TextAlignVertical.center,
            style: TextStyle(
                      fontFamily: 'Michroma',
                      fontSize: 12),
                      decoration: InputDecoration(
                         hintText: 'Type  away !   :',
                         hintStyle: TextStyle(
                         fontFamily: 'Michroma',
                         fontWeight: FontWeight.bold,
                                      fontSize: 12),