The flutter input box TextField sets the correct posture for styles such as height and background color

While learning about Flutter, one of the most teased questions I heard about flutter was how to set the style of the TextField. How to set the height? How does height adapt? Why is the default input field so big? How to set the background color? And so on, in fact, we are not enough to understand this control, the following record the most commonly used attributes for reference

TextEditingController _inputController = TextEditingController(); FocusNode _inputFocusNode = FocusNode(); // FocusNode, usually used to automatically obtain focus and remove focus to hide keyboard. // OutlineInputBorder _outlineInputBorder = OutlineInputBorder(gapPadding: 0, borderSide: borderSide (color: borderSide)) Colors.grey[200], ), ); TextField(Controller: _inputController,// controller focusNode: _inputFocusNode,// focus: TextStyle(fontSize: 16, color: Color.black87),// maxLines: 10,// minLines: 1,// onChanged: (text) {// Input box content change callback setState(() {}); // input box content change callback setState(() {}); }, decoration: InputDecoration(fillColor: color.grey [50],// the color of the background must be filled: true. Collapsed: true,// key, must be set to true, isCollapsed: true,// key, must be set to true, or has default magic minimum height contentPadding: EdgeInsets. Symmetric (horizontal: 8, vertical: 10),// Internal margin, effect height border: //keyboardType: textinputtype. number, //keyboardType //obscureText: True,// Password mode focusedBorder: _outlineInputBorder, enabledBorder: _outlineInputBorder, disabledBorder: _outlineInputBorder, focusedErrorBorder: _outlineInputBorder, errorBorder: _outlineInputBorder, ), ), )Copy the code

Collapsed: true The most important property is isCollapsed: true, or the default minimum height, and the contentPadding top becomes negative.

There are many more attributes, view the document yourself.

  • Results the following