Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Record Flutter tips, stomp holes, dig holes, repeat mistakes, resolve and liquidate

When using TextField as a custom search component, the text is not in the center. In many cases, the seemingly simple things take the most time. To be honest, I spent a lot of time on this mainly because of the fixed height, so that the center Settings will not work

Below is an off-center rendering:

Here are the renderings of Ju Zhong:

Core code:

contentPadding:
    EdgeInsets.symmetric(vertical: -10, horizontal: -10),
border: OutlineInputBorder(borderSide: BorderSide.none),

Copy the code

Set the above properties to achieve.

The following code refers to the network Settings, but does not take effect.

border: OutlineInputBorder( 
    borderSide: BorderSide( color: Colors.transparent, ), ),
    enabledBorder: OutlineInputBorder( borderSide: BorderSide( color: Colors.transparent, ), ),
    disabledBorder: OutlineInputBorder( borderSide: BorderSide( color: Colors.transparent, ), ), 
    focusedBorder: OutlineInputBorder( borderSide: BorderSide( color: Colors.transparent, ),
),
Copy the code

Centered complete code:

TextField( controller: textEditingController, autofocus: true, textInputAction: TextInputAction.search, focusNode: FocusNode, cursorColor: color.fromrgbo (66, 133, 244, 1.0), // Fine tune TextStyle height and contentPadding style: TextStyle(height: 1.4, fontSize: 14, color: wmcolor.text_373e4D), decoration: InputDecoration(icon: Padding(child: ImageWidget( WMImageName.patient_search, width: 18, height: 18, fit: BoxFit.contain, ), padding: EdgeInsets.only(left: 10),), hintText: 'enter key words ', hintStyle: TextStyle(height: 1.4, fontSize: 14, color: WMColor.text_A1A7B3), // contentPadding: // EdgeInsets.symmetric(vertical: -10, horizontal: -10), border: OutlineInputBorder(borderSide: BorderSide.none), counterText: "", ), textAlignVertical: TextAlignVertical.center, onSubmitted: (vale) { if (searchCallBack ! = null) { searchCallBack! (vale); } }, onChanged: (vale) { if (onChanged ! = null) { onChanged! (vale); }}),Copy the code

The above is to record small skills 01, if there is wrong place, big guys give advice.