How to disable TextFormField default animation - flutter

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

Related

How to remove TextFormField default bottom padding in flutter

How can I remove the default bottom padding from the TextFormField?
I try to remove all default padding it didn't work.
Expanded(
child:AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.blue,
child: TextFormField(
scrollPadding: EdgeInsets.zero,
focusNode: pin1FocusNode,
style: const TextStyle(fontSize: 20),
maxLength: 1,
keyboardType: TextInputType.number,
textAlign: TextAlign.center,
decoration: InputDecoration(
counter: const Offstage(),
contentPadding:
EdgeInsets.zero,
border: outlineInputBorder(),
focusedBorder: outlineInputBorder(),
enabledBorder: outlineInputBorder(),
),
onChanged: (value) => nextField(value, pinFocusNode),
),
)))
You can not remove this padding, you can do one thing, you can remove the underline from TextFormField and but border under the container., it may be easy. And instead of using Expanded and AspectRatio just put some height and width in the container.

change hint Text position in Text field with expands in flutter

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

How do I make a TextField take up the entire screen

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

how can I put my textfield input stay center vertically?

I want to put a textFiled in a Container. But I found the input content couldn't stay vertically certer(a bit higher) in the Container but the two icons displayed well. Is there a solution to my situation?
Container(
width: ScreenAdapt.widthToDp(330),
height: ScreenAdapt.heightToDp(40),
alignment: Alignment.centerLeft,
child: TextField(
controller: inputController,
focusNode: focusNode,
style: MyTextStyle.level4,
keyboardType: TextInputType.number,
decoration: InputDecoration(
prefixIcon: MyIcon.SearchGreyIcon,
hintText: 'hint text here',
hintStyle: MyTextStyle.grey,
border: InputBorder.none,
suffixIcon: focusNode.hasFocus ? IconButton(
icon: MyIcon.CloseIcon,
onPressed: () => inputController.clear(),
) : Container(),
),
),
decoration: BoxDecoration(
color: MyColor.MidGray,
borderRadius: MyStyle.CIRCULAR_BORDER_RADIUS,
),
),
try this as #Assassin Suggested
InputDecoration(
prefixIcon: MyIcon.SearchGreyIcon,
hintText: 'hint text here',
hintStyle: MyTextStyle.grey,
border: InputBorder.none,
filled: true,
suffixIcon: focusNode.hasFocus
? IconButton(
icon: MyIcon.CloseIcon,
onPressed: () => inputController.clear(),
)
: Container(),
)

Flutter: how to make a TextField with HintText but no Underline?

This is what I'm trying to make:
In the Flutter docs for Text Fields (https://flutter.io/text-input/) it says you can remove the underline by passing null to the decoration. However, that also gets rid of the hint text.
I do not want any underline whether the text field is focused or not.
UPDATE: updated accepted answer to reflect changes in Flutter SDK as of April 2020.
Do it like this:
TextField(
decoration: new InputDecoration.collapsed(
hintText: 'Username'
),
),
or if you need other stuff like icon, set the border with InputBorder.none
InputDecoration(
border: InputBorder.none,
hintText: 'Username',
),
),
New Flutter SDK since after integration of web and desktop support you need to specify individually like this:
TextFormField(
cursorColor: Colors.black,
keyboardType: inputType,
decoration: 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: "Hint here"),
)
Here is a supplemental answer that shows some fuller code:
Container(
decoration: BoxDecoration(
color: Colors.tealAccent,
borderRadius: BorderRadius.circular(32),
),
child: TextField(
decoration: InputDecoration(
hintStyle: TextStyle(fontSize: 17),
hintText: 'Search your trips',
suffixIcon: Icon(Icons.search),
border: InputBorder.none,
contentPadding: EdgeInsets.all(20),
),
),
),
Notes:
The dark background (code not shown) is Colors.teal.
InputDecoration also has a filled and fillColor property, but I couldn't get them to have a corner radius, so I used a container instead.
I found no other answer gives a border radius, you can simply do it like this, no nested Container
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(20),
),
),
);
change the focused border to none
TextField(
decoration: new InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
contentPadding: EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
hintText: 'Subject'
),
),
To make a Borderless TextFormField i found below solution:
It is without using container.
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15.0),
borderSide: BorderSide.none,
),
labelText: "Student email/id",
floatingLabelStyle: const TextStyle(
height: 4,
color: Color.fromARGB(255, 160, 26, 179)),
filled: true,
fillColor: Colors.grey[200],
prefixIcon: const Icon(Icons.person),
),
),
Sample Normally:
While having input error:
While user input:
TextField(style: TextStyle(color: Colors.black45,fontSize: 18,decorationThickness: 0.0)). It's showing without underline with decorationThickness:0.0.
Container(
height: 50,
// margin: EdgeInsets.only(top: 20),
decoration: BoxDecoration(
color: Colors.tealAccent,
borderRadius: BorderRadius.circular(32)),
child: TextFormField(
cursorColor: Colors.black,
// keyboardType: TextInputType.,
decoration: InputDecoration(
hintStyle: TextStyle(fontSize: 17),
hintText: 'Search your trips',
suffixIcon: Icon(Icons.search),
border: InputBorder.none,
contentPadding: EdgeInsets.all(18),
),
),
),
Default
Container(
padding: const EdgeInsets.all(20),
child: const TextField(
decoration: InputDecoration(
border: UnderlineInputBorder(), hintText: "Search Your tips"),
),
),
Outline Border
Container(
padding: const EdgeInsets.all(20),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(40),
),
hintText: "Search Your tips",
),
),
),
No Border
Container(
padding: const EdgeInsets.all(20),
child: const TextField(
decoration: InputDecoration(
border: InputBorder.none, hintText: "Search Your tips"),
),
),
Try the following code:
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(borderSide: BorderSide.none, borderRadius: BorderRadius.circular(30.0)),
hintText: "Search your trips",
hintStyle: const TextStyle(color: Colors.white, fontWeight: FontWeight.w300),
filled: true,
fillColor: Colors.cyan[200],
suffixIcon: IconButton(
onPressed: () {},
icon: const Icon(Icons.search, color: Colors.white),
),
),
),
decoration: InputDecoration(
border:OutLineInputBorder(
borderSide:BorderSide.none
bordeRadius: BordeRadius.circular(20.0)
)
)
To remove underline border: InputBorder.none,
For hint use hintText: 'Hint Text'
TextFormField(
InputDecoration(
border: InputBorder.none,
hintText: 'Hint Text',
),
),
To remove TextField underline in Flutter, you can simply use InputBorder.none.
TextField(
decoration: InputDecoration(
hintText: 'Hint Text',
border: InputBorder.none,
),
)