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)),
);
Try below code and set
isDense: true,
hope its help to you.Result->