[Part 62 of the Flutter Problem Series] Solve the problem that the input content cannot be centered after the height of the TextField input box component is set

This is [The 62nd part of the Flutter problem series]. If you find it useful, please pay attention to the column.

One: problem description

When we use TextField directly, the input content can be centered, but many times we customize the input box. When the set height is less than the default height of TextField, there will be a problem that the input content is not centered, as shown in the following figure

The code at this point is as follows

return TextField(
  decoration: InputDecoration(
    border: InputBorder.none,
  ),
);

It can be seen that just using the InputBorder.noneattribute remove the underline that comes with the input box, there is a problem that the input content is not centered. For this kind of situation, tell me how to solve the problem.

Two: Solutions

The problem lies in setting the border property InputBorder.none, then we will customize one

InputBorder _inputBorder() {
    
    
  return OutlineInputBorder(
    borderSide: BorderSide(width: 0, color: Colors.transparent),
  );
}

Here we set the width of the border to 0 and the color to be transparent.

Then decorationset the properties related to border (a total of 6, such as focusedBorder, enabledBorderetc.) in the custom method _inputBorder()Set , as shown in the following code

decoration: InputDecoration(
  focusedBorder: _inputBorder(),
  disabledBorder: _inputBorder(),
  errorBorder: _inputBorder(),
  focusedErrorBorder: _inputBorder(),
  enabledBorder: _inputBorder(),
  border: _inputBorder(),
  contentPadding: EdgeInsets.all(0), // 注意添加此属性
),

The effect diagram is as follows

It needs to be reminded that the inner margin of the contentPadding is finally set to 0 (mainly to set the vertical distance to 0), otherwise there will also be a problem that the content is not centered. Generally, the distance from the left side of the input content will be set, and the setting
contentPadding: EdgeInsets.only(left: 15)is Can.

Although the problem is solved, I have not delved into the principle, and those who are interested can experiment.

Finally, I attach two highly praised answers on the Internet about the content that is not centered. Although it is of no use to me, I will record it with the mentality of existence and rationality. What if it can solve your problem?

Other method one:

Add contentPadding directly, as shown in the following code

contentPadding: EdgeInsets.all(0)

Other method two:

Set the alignment as shown in the following code

return TextField(
  style: TextStyle(textBaseline: TextBaseline.alphabetic),
);

Has your problem been resolved? Welcome to leave a message in the comment area.

Give someone a rose, and there is a lingering fragrance in your hand. If you think the article is good, I hope you can give a one-click three-link, thank you.

---

concluding remarks

Google's Flutter is getting more and more popular. As of April 27, 2022, the GitHub star has reached 139K. Flutter is resolutely a trend, so as a front-end developer, there is no reason not to learn as soon as possible.

Whether you are a Flutter novice or have already started, you might as well pay attention first. I will write the common components in Flutter (including source code analysis, component usage and precautions) and possible problems in the CSDN blog. I hope While learning by yourself, you can also help more people.