I have Text field which will take a long message from the user and I set expands to True
the problem is the hint text is not at the beginning of the the line, How do I change its position ?
SizedBox(
height: 150,
child: CustomTextField(
enabledRadius: 7,
focusedRadius: 7,
expands: true,
hintText: 'message',
controller: messageController,
textInputType: TextInputType.multiline,
),
),
Thanks everyone, I figured it out by using
textAlignVertical: TextAlignVertical(y: -1),
You can use `textAlign:TextAlign.start` to align the hint
Here see the full code:
SizedBox(
height: 150,
child: CustomTextField(
enabledRadius: 7,
focusedRadius: 7,
expands: true,
maxLines: null,
textAlign: TextAlign.start,
hintText: 'message',
controller: messageController,
textInputType: TextInputType.multiline,
),
),
You can customise TextFormField by using these properties.
textAlign: TextAlign.left,
decoration: const InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
hintText: '0',
counterText: '',
hintStyle: TextStyle(
color: greyPlaceholderColor,
fontSize: fontSize40,
fontWeight: FontWeight.w700)),
Related
I am creating a notes application and using a text field with max lines set as null so the text can expand infinitely according to the text. The problem is that you can only start typing in the note when you select the text field due to its size I want to make it big enough to cover the entire screen for accessibility but I fear that the size of the text field may differ on each device which would ruin the entire point of making it fit the entire screen.
TextField(
controller: _textController,
style: const TextStyle(color: Colors.white),
keyboardType: TextInputType.multiline,
maxLines: null,
decoration: const InputDecoration(
contentPadding:
EdgeInsets.symmetric(horizontal: 10, vertical: 10),
border: InputBorder.none,
hintText: "Start typing your note...",
hintStyle: TextStyle(color: Colors.white),
),
);
By wraping your TextField in a SizedBox with a height: double.infinity you can expand your TextField
SizedBox(
height: double.infinity,
child: TextField(
controller: _textController,
style: const TextStyle(color: Colors.white),
keyboardType: TextInputType.multiline,
maxLines: null,
decoration: const InputDecoration(
contentPadding:
EdgeInsets.symmetric(horizontal: 10, vertical: 10),
border: InputBorder.none,
hintText: "Start typing your note...",
hintStyle: TextStyle(color: Colors.white),
)),
),
SizedBox(
height: MediaQuery.of(context).size.height,
TextField(
controller: _textController,
style: const TextStyle(color: Colors.white),
keyboardType: TextInputType.multiline,
maxLines: null,
decoration: const InputDecoration(
contentPadding:
EdgeInsets.symmetric(horizontal: 10, vertical: 10),
border: InputBorder.none,
hintText: "Start typing your note...",
hintStyle: TextStyle(color: Colors.white),
),
),
),
I tried using stack widget but it's not work.
I see some references from native Android, and there's no error like this.
source code
const Expanded(
child: Scrollbar(
child: TextField(
decoration: InputDecoration(
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
hintText: 'Write a message...',
),
maxLines: 6,
keyboardType: TextInputType.multiline,
textInputAction: TextInputAction.newline,
minLines: 1,
),
),
),
I want to disable the default behavior when a user focus on the text field, where the label text gets smaller and docks to the upper left :
I want to disable this behavior and only make the label text disappear, how can I do it?
Use FloatingLabelBehavior.never inside InputDecoration will help you hiding your label and instead of labelText you can use hintText so it becomes disappear when you type something.
TextFormField(
decoration: InputDecoration(
hintText: "Search",
floatingLabelBehavior: FloatingLabelBehavior.never,
border: InputBorder.none,
suffixIcon: Icon(
Icons.search,
),
),
),
Try out this
TextFormField(
cursorColor: Colors.black,
keyboardType: TextInputType.text,
decoration: new InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding:
EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
hintText: "Hints"),
)
And customize textfield decoration as you desired.
You can actually add a leading widget inside TextFormField where you can put the country picker.
Row(
children: <Widget>[
Expanded(
child: FormBuilderTextField(
validator: FormBuilderValidators.compose([
FormBuilderValidators.required(context),
FormBuilderValidators.minLength(context, 9),
FormBuilderValidators.maxLength(context, 9),
FormBuilderValidators.numeric(context),
]),
name: "mobile_number",
keyboardType: TextInputType.phone,
decoration: InputDecoration(
prefixIcon: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: CountryPickerDropdown(
initialValue: 'AU',
itemBuilder: _buildDropdownItem,
itemFilter: (c) => [
'AU',
'PH',
].contains(c.isoCode),
priorityList: [
CountryPickerUtils.getCountryByIsoCode('AU'),
CountryPickerUtils.getCountryByIsoCode('PH'),
],
sortComparator: (Country a, Country b) =>
a.isoCode.compareTo(b.isoCode),
onValuePicked: (Country country) {
print("${country}");
},
),
),
labelText: 'Mobile #',
floatingLabelBehavior: FloatingLabelBehavior.never,
),
)),
],
),
Looking to have a TextField which has multiple rows but also an underline for each row. When typing text it should continue to the next row without needing the return key.
Current:
TextField(
maxLines: 2,
decoration: InputDecoration(
enabledBorder: new UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
width: 1.0,
style: BorderStyle.solid),
),
),
)
Current Output:
Desired Output:
this will work for you I guess
TextField(
keyboardType: TextInputType.multiline,
minLines: 100,
maxLines: 500,
style: TextStyle(
decoration: TextDecoration.underline,
),
decoration: InputDecoration(
enabledBorder: InputBorder.none,
hintText: 'Notes.....',
hintStyle: TextStyle(color: Colors.black87),
),
),
If you'd still like to change the color or type or density of the underline use the decorationStyle,decorationColor, and decorationThickness properties.
Whenever I write the word is underlined. As soon as I write a new word, it will no longer be underlined, but what I am currently writing. Can I somehow issue that nothing is underlined when writing? I didn't find anything in the forum either.
child: TextField(
autocorrect: false,
style: TextStyle(
fontSize: 22.0,
),
cursorColor: Colors.black,
decoration: InputDecoration(
hintText: 'Search',
border: InputBorder.none,
icon: Icon(
Icons.search,
color: Color(0xFFe1F5FE),
),
),
),
did you try it with focusedBorder?
TextField(
decoration: new InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
contentPadding: EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
hintText: 'what you want'
),
),
Put this code inside TextField
keyboardType: TextInputType.text,
Example:
TextField(
keyboardType: TextInputType.text,
autocorrect: false,
style: TextStyle(
fontSize: 22.0,
),
cursorColor: Colors.black,
decoration: InputDecoration(
hintText: 'Search',
border: InputBorder.none,
icon: Icon(
Icons.search,
color: Color(0xFFe1F5FE),
),
),
),