I want to put some padding from top, label is coming out from Textfield when entering text in TextFormField,
I tried content padding , but still not working.
here is my code
#override
Widget build(BuildContext context) => TextFormField(
controller: TextEditingController(),
style: Theme.of(context).textTheme.subtitle2,
decoration: InputDecoration(
fillColor: Theme.of(context).disabledColor,
border: OutlineInputBorder(
borderSide:
BorderSide.none,
borderRadius: BorderRadius.circular(BorderSize.input),
),
contentPadding:
EdgeInsets.all( PaddingSize.inputHorizontal),
filled: true,
isDense: true,
labelText: hint),
onSaved: onSaved,
validator: _exists);
}
It seems to be a problem with the border. If you don't need them, just remove and try.
TextFormField(
controller: TextEditingController(),
style: Theme.of(context).textTheme.subtitle2,
decoration: InputDecoration(
fillColor: Theme.of(context).disabledColor,
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding:
EdgeInsets.all( PaddingSize.inputHorizontal),
filled: true,
isDense: true,
labelText: hint),
onSaved: onSaved,
validator: _exists);
Let me know if this is expected.
EDIT :
Disable all the borders as above.
Related
So I know that you can Align the contents in a textformfield through the
textAlignVertical
property. I tried this on my TextFormField:
TextFormField(
textAlignVertical: TextAlignVertical.bottom,
style: TextStyle(
color:
isUnlocked ? Color(0xffF6CD9D) : Colors.grey),
cursorColor: Color(0xffF6CD9D),
enabled: isUnlocked,
controller: vornameController,
decoration: new InputDecoration(
focusColor: Color(0xffF6CD9D),
hoverColor: Color(0xffF6CD9D),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffF6CD9D)),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xffF6CD9D)),
),
),
),
The result looks like this:
But I want the text to be on the line itself. How can I achieve this behaviour?
Add is dense true and content padding
decoration: InputDecoration(
isDense: true,
contentPadding: EdgeInsets.all(0),
...
),
SizedBox(
width: double.infinity,
child: TextField(
decoration: InputDecoration(
hintStyle: TextStyle(height: 12),
isDense: true,
hintText: "Buraya yazın...",
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(10),
),
fillColor: Color(0xFFD8DDE0),
filled: true),
),
),
how can i make this text field anyone can help me?
I tried to adjust the height of the text, but its position is centered, how can I make this text field this time?
use maxlines properties and remove height from hintstyle
Output :-
Code:-
TextField(
maxLines: 5,
decoration: InputDecoration(
isDense: true,
hintText: "Buraya yazın...",
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(10),
),
fillColor: Color(0xFFD8DDE0),
filled: true),
),
Try below code:
TextField(
textAlignVertical: TextAlignVertical.top,
maxLines: 6,
decoration: InputDecoration(
isDense: true,
hintText: "Buraya yazın...",
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(10),
),
fillColor: Color(0xFFD8DDE0),
filled: true,
),
),
Result Screen->
Use textAlign to align the text at the start and you can use the maxLines property of TextFormField to adjust its height.
Code Snipped:
TextFormField(
maxLines: 8,
textAlign: TextAlign.start,
decoration: InputDecoration(
hintText: "Buraya yazın...",
fillColor: const Color(0xFFD8DDE0),
filled: true,
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(15),
),
),
),
I have a TextFormField when the user clicks on it there is a huge space in between comes. As keyboard opening adds padding.
This is my widget tree
Code
TextFormField(
keyboardType: TextInputType.text,
textInputAction: TextInputAction.next,
maxLines: 1,
style: TextStyle(color: text_color, fontSize: 14),
decoration: InputDecoration(
fillColor: appBackground_color,
filled: true,
focusColor: text_color,
contentPadding: EdgeInsets.all(12),
disabledBorder: InputBorder.none,
labelText: StringClass.ENTER_NAME),
),
),
How to hide the bottom edge on TextField?
TextField(
decoration: InputDecoration(
hintText: '(201) 555-0123',
),
You can use the *border parameters of TextField:
TextField(
decoration: InputDecoration(
hintText: '(201) 555-0123',
// Hides the border when the TextField is enabled
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.transparent),
),
// Hides the border when you click the TextField
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.transparent),
),
// Hides the border when the TextField is disabled
disabledBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.transparent),
),
),
)
How are you?
You can set the border of InputDecoration to InputBorder.none.
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
hintText: S.of(context).textHere,
hintStyle: TextStyle(fontSize: 12),
),
minLines: 5,
maxLines: null,
controller: _content,
keyboardType: TextInputType.multiline,
textCapitalization: TextCapitalization.sentences,
),
https://i.stack.imgur.com/trK69.png
I want to change the labelText and the icon colors of my TextFormField when it's highlighted. This is my code:
TextFormField(
enabled: enable,
controller: textEditingController,
obscureText: obscureText,
validator: validate,
keyboardType: keyboardType,
decoration: InputDecoration(
focusedBorder: UnderlineInputBorder(
borderSide:
BorderSide(color: Colors.yellow),
),
border: UnderlineInputBorder(),
enabledBorder: _checkBorder(),
labelText: labelText,
prefixIcon: Padding(
padding: EdgeInsets.all(distanceIconFromEdges),
child: icon,
),
hintText: hintText,
))
Wrap your TextFormField in Theme and change accentColor
Theme(
data: Theme.of(context).copyWith(accentColor: Colors.red),
child: TextFormField(...),
)