You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
the default textfield height is too big(the padding of top and bottom too big), i want little size, how can i implementation it?
i known InputDecoration.collapsed can remove the space, but it can't use prefix and suffix.
Add it to a Container and adjust the height of Container according to Your requirement
Reacted by Khoa, Joshua Chinemezu, Abdurrahman Anas, Lavkant Kachhwaha and Jiangming Yang
Reacted by Osama Bin Ishrat, Mohamed Bziyar, Louis Chovaneck, RoyceLee, Zain Hasib, Sumeet Mathews, Lucas Didur, Caleb Robinson, qieting, Alejandro Endo and 17 more
Reacted by Jiangming Yang
Reacted by Husam Aamer, Jose Tapizquent, qieting and Alireza Easazade
Reacted by Joshua Chinemezu, Husam Aamer and Jiangming Yang
Reacted by Ayush Nishad, HardwareWolf, Ion Olaru and Pourya Pouryeganeh
Reacted by AlexYegorov, Yuri-Desk, sidharthsankar, Saswat Sahoo, mfarizon, Valentina López, Christian Mürtz, kazimad, Ramzieus, Marcel Čampa and 2 more
Use contentPadding:
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8.0),//here your padding
border: OutlineInputBorder(............
Reacted by Osama Bin Ishrat, Konstantin Serov, Craftplacer, Mahmoud Abdellatief, MaHi177, Aleph Santos Oliveira, Hasan, shenjingfs, devgianlu, arthurccorrea and 21 more
Reacted by Iqbal S Putra, Philipp Bauer and Nelio Lucas
Reacted by Osama Bin Ishrat, MaHi177, Panacea-Soft, Choxmi Sathsara and pravinargents
Use contentPadding:
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8.0),//here your padding
border: OutlineInputBorder(............
This is actually a working solution, thanks!
Restricting a TextField with a container (as a couple of commenters advised before) has a huge drawback in case of TextFormField with validation, the textfield won't grow if validation fails and that will look really ugly. But using decoration is the correct way to do it
You can control the height using these two properties together in your InputDecoration. For example, if contentPadding is set to EdgeInsets.all(0), the TextField will have no padding at all around the text and will be "short".
Reacted by erbrother.io, chinmaymujumdar, Khalil Khalil, sonanis, Mohamed Gaber, Sean Steinke, Robert Lampreht, Walter Ngo, Eddie Kwon, Laojin233 and 33 more
Reacted by Victor Camargo, Mustafa Azzawie, Lilong Zhang, Taufik Nur Rahmanda, Promlert Lovichit, Yaolegol and Alireza Easazade
Reacted by Mohamed Gaber, gitfornncn, TuanPV, Thanh Truong, Eddie Kwon, phuongthuan, gonharry, Adel MALIK-MONROCQ, Victor Camargo, Yaolegol and 1 more
Reacted by Victor Camargo, Yaolegol and Alireza Easazade
You can control the height using these two properties together in your InputDecoration. For example, if contentPadding is set to EdgeInsets.all(0), the TextField will have no padding at all around the text and will be "short".
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.
Activity
zoechi commentedon Feb 12, 2019
Please add the output of
flutter doctor -v.rkishan516 commentedon Feb 12, 2019
Add it to a Container and adjust the height of Container according to Your requirement
HansMuller commentedon Feb 13, 2019
There's work underway to make textfield height more configurable: #27205
chetan2469 commentedon Apr 17, 2019
TextField(
maxLines: 5,
),
josquared commentedon Jun 13, 2019
Container(
Width:32,
child:textfield(
)
)
freesailor commentedon Jul 2, 2019
Use contentPadding:
TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.all(8.0),//here your padding
border: OutlineInputBorder(............
skysukai commentedon Jul 18, 2019
It's not work
mudi256 commentedon Aug 19, 2019
Inside the TextFormField
decoration: InputDecoration(
hintText: 'Email',
contentPadding: new EdgeInsets.symmetric(vertical: 25.0, horizontal: 10.0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
),
caseyryan commentedon Oct 6, 2019
This is actually a working solution, thanks!
Restricting a TextField with a container (as a couple of commenters advised before) has a huge drawback in case of TextFormField with validation, the textfield won't grow if validation fails and that will look really ugly. But using decoration is the correct way to do it
orourkedd commentedon Dec 31, 2019
You can control the height using these two properties together in your
InputDecoration. For example, ifcontentPaddingis set toEdgeInsets.all(0), theTextFieldwill have no padding at all around the text and will be "short".mahmoud-eslami commentedon Feb 19, 2020
it worked thx
IvanDev333 commentedon Apr 8, 2020
TextField(
expands: true,
will expand the textField to its Container Height
lock commentedon Apr 25, 2020
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.