Remove white space from Flutter TextField lable widget

182 Views Asked by At

can you please let me know how we can remove a small margin from the text field label widget? also, can we add a different design for the label?

1.can we set different design label widgets to display vertically in the center of the text field? I want to show normal text in the center and when I tap on the text field then shows the label with a border. 2.Is there any method available to remove the extra margin from the label widget?

Here is below textField widget.

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

Here is the Input decoration

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)),
  );

enter image description here

enter image description here

1

There are 1 best solutions below

1
On

Try below code and set isDense: true, hope its help to you.

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

Result-> image