简体   繁体   English

将填充添加到 TextField 光标/使 TextField 光标在颤动中居中

[英]add padding to TextField cursor / center the TextField cursor in flutter

I have a TextField and when i change cursor height it comes down .我有一个 TextField,当我更改光标高度时,它会下降。 i want it come center or add padding under it.我希望它居中或在它下面添加填充。

I have a TextField and when i change cursor height it comes down .我有一个 TextField,当我更改光标高度时,它会下降。 i want it come center or add padding under it.我希望它居中或在它下面添加填充。

and this is my code.这是我的代码。

TextField(
        cursorHeight: 30,
        cursorColor: Colors.yellow,
        cursorWidth: 2,
        cursorRadius: Radius.circular(500),
        style: TextStyle(color: Colors.white, fontSize: 14),
        obscureText: isPasswordTextField ? showPassword : false,
        decoration: InputDecoration(
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.transparent),
              borderRadius: BorderRadius.all(Radius.circular(8)),
            ),
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(width: 2, color: Colors.yellow),
              borderRadius: BorderRadius.circular(10),
            ),
            suffixIcon: isPasswordTextField
                ? IconButton(
                    onPressed: () {
                      setState(() {
                        showPassword = !showPassword;
                      });
                    },
                    icon: Icon(
                      Icons.remove_red_eye,
                      color: Colors.yellow,
                    ),
                  )
                : null,
            contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0),
            filled: true,
            fillColor: Color.fromRGBO(28, 28, 28, 1),
            labelText: labelText,
            labelStyle: TextStyle(
              color: Colors.yellow,
              fontSize: 22,
              fontFamily: 'Exo',
                fontWeight: FontWeight.bold
            ),
            floatingLabelBehavior: FloatingLabelBehavior.always,
            hoverColor: Color.fromRGBO(54, 54, 54, 1),
            hintText: placeholder,
            hintStyle: TextStyle(
              fontSize: 14,
              color: Colors.white,
            )
        ),
      ),

this is image这是图像

Try below code hope its helpful to you.add your extra code also I tried to design试试下面的代码希望它对你有帮助。添加你的额外代码也是我尝试设计的

  TextField(
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
            ),
            decoration: InputDecoration(
              enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.transparent),
                borderRadius: BorderRadius.all(
                  Radius.circular(8),
                ),
              ),
              focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(
                  width: 2,
                  color: Colors.yellow,
                ),
                borderRadius: BorderRadius.circular(10),
              ),
              suffixIcon: IconButton(
                onPressed: () {
                  setState(() {});
                },
                icon: Icon(
                  Icons.remove_red_eye,
                  color: Colors.yellow,
                ),
              ),
              // floatingLabelBehavior: FloatingLabelBehavior.always,
              contentPadding: EdgeInsets.fromLTRB(10, 0, 0, 0),
              filled: true,
              fillColor: Color.fromRGBO(28, 28, 28, 1),
              labelText: 'labelText',
              labelStyle: TextStyle(
                  color: Colors.yellow,
                  fontSize: 22,
                  fontFamily: 'Exo',
                  fontWeight: FontWeight.bold),
              hoverColor: Color.fromRGBO(54, 54, 54, 1),
              hintText: 'placeholder',
              hintStyle: TextStyle(
                fontSize: 14,
                color: Colors.white,
              ),
            ),
          ),

Your result screen->您的结果屏幕-> 图片

This should help.这应该有帮助。 As you can see in the your textfiled there is no height specified.正如您在文本文件中看到的,没有指定高度。

TextField(
          cursorHeight: 30,
          cursorColor: Colors.yellow,
          cursorWidth: 2,
          cursorRadius:const Radius.circular(500),
          style: TextStyle(
                  color: Colors.white,
                  fontSize: 14,  
                   height: 1.5 //Add this
           ),
          ),

在此处输入图片说明

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM