No matter which interface frame, the input text box is a very important control. However, although there are many input boxes in flutter, the textField introduced in flutter, but many articles cannot explain clearly how to combine various attributes to meet the needs. In addition, the control version is frequently changed, and many functions are introduced with relatively old attributes. Now we need an input text box similar to WeChat. How to implement such a very practical effect? The premise is to try to use existing attributes, write less or not write code.
First clarify what functions are there in this input text box?
- Able to customize various spacing. Mainly the control margin (margin); inner spacing (padding);
- Able to customize the style. Enter the border (radius), stroke (border), color); words (size, color), prompt words (hint);
- Adaptive. The font size increases and the height of the control also increases while maintaining the specified inner and outer margins.
- The most important function: Multiple lines of text. And the height of the control can increase with line breaks
- Customize the maximum number of lines: that is, the height does not increase infinitely with line breaks. After specifying the maximum number of lines of the control, the text box content can be scrolled. If you specify the maximum height of the control in a numerical way, it is easy to cause text truncation.
1, 2, 3 are very convenient in flutter, and the decoration attribute can satisfy almost all custom styles.
4. It's not troublesome. The current keyboardType: , attribute can better support multiple lines of text;
5. The single function is not troublesome. The attribute maxLines is already supported to specify the maximum number of rows.
What's troublesome is that the combination of these attributes is not ideal:
- Only maxLines is specified. The input box will display the height of the specified number of lines from the beginning, not increasing with the line break. At this time, you need to add the minLines: 1 attribute at the same time.
- It is best to explicitly add keyboardType: , attributes, which seems to be used by the old version by default, so that multiple lines cannot be supported.
- The control is too high when single-line text. This is because the control has a default height, causing the margin to fail.
- Adaptive failure. The contentPadding property in the declaration is specified. The result is that the value of the inner margin is incorrect after the height of the control changes.
3, 4 is actually a problem. We expect that the wrap_content property in Android will adapt to the size of the font and the margins will not be affected. At this time, it isDense in InputDecoration, remove the redundant margins, and only the specified contentPadding is displayed.
Another point to note is that the parent node of TextField must not be a ConstrainedBox or a Container constraints specified. The current control can control the height by itself!
Final results on:
Row(
children: <Widget>[
Text('111'),
Expanded(
child: TextField(
keyboardType: ,
maxLines: 5,
minLines: 1,
decoration: const InputDecoration(
hintText: 'enter',
filled: true,
fillColor: ,
contentPadding: const (horizontal: 10, vertical: 5),
isDense: true,
border: const OutlineInputBorder(
gapPadding: 0,
borderRadius: const ((4)),
borderSide: BorderSide(
width: 1,
style: ,
),
),
),
),
),
Text('222'),
]
)
In addition, there are also LayoutBuilder to achieve adaptive height for line breaks through online, which is also a very powerful idea.
/questions/51205333/flutter-textfield-that-auto-expands-when-text-is-entered-and-then-starts-scrolli/54215431#54215431
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.