从Flutter TextField标签构件中删除白色

wlp8pajw  于 2023-01-14  发布在  Flutter
关注(0)|答案(1)|浏览(163)

你能请让我知道我们如何能从文本字段标签小部件中移除一个小的边距吗?另外,我们能为标签添加一个不同的设计吗?
1.我们是否可以设置不同的设计标签小部件,使其垂直显示在文本字段的中心?我想在中心显示正常文本,当我点击文本字段时,将显示带有边框的标签。2.是否有任何方法可以从标签小部件中删除多余的边距?
下面是textField小部件。

TextFormField(
          validator: (value) {
            return (value == null || value.isEmpty)
                ? 'Please Enter Password'
                : null;
          },
          controller: tfPasswordController,
          decoration: inputDecoration('Password', Icons.lock),
        ),

这是输入修饰

InputDecoration inputDecoration(String labelText, IconData iconData,
    {String? prefix, String? helperText}) {
  return InputDecoration(
    contentPadding: const EdgeInsets.symmetric(vertical: 12, horizontal: 12),
    // helperText: helperText,
    // labelText: labelText,
    labelStyle: const TextStyle(color: Colors.black),
    fillColor: Colors.blue,
    filled: true,
    prefixText: prefix,
    prefixIcon: Icon(
      iconData,
      size: 20,
    ),
    alignLabelWithHint: false,

    label: Container(
        padding: EdgeInsets.zero,
    decoration: BoxDecoration(color: Colors.green,borderRadius: BorderRadius.circular(20),
    border: Border.all(width: 1)),
        child: Padding(
      padding: const EdgeInsets.symmetric(vertical: 6.0,horizontal: 12),
      child: Text(labelText),
    )),
    prefixIconConstraints: const BoxConstraints(minWidth: 60),
    enabledBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(30),
        borderSide: const BorderSide(color: Colors.black)),
    focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(30),
        borderSide: const BorderSide(color: Colors.black)),
    errorBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(30),
        borderSide: const BorderSide(color: Colors.black)),
    border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(30),
        borderSide: const BorderSide(color: Colors.black)),
  );

qyswt5oh

qyswt5oh1#

尝试下面的代码并设置isDense: true,,希望对您有所帮助。

TextField(
      decoration: InputDecoration(
        contentPadding: EdgeInsets.all(0.0),
        isDense: true,
        labelText: "Email",
        border: InputBorder.none,
      ),
    ),

结果-〉x1c 0d1x

相关问题