Flutter Textfield Height Customization | Flutter Tutorial | Flutter For beginners

assalamualaikum hope you're all fine so in this video tutorial we'll be seeing how to change the height of a flutter text field widget so as you can see here we have a text field and we also have wrapped it with a padding and a center Center widget is used to Center the text field in the screen and padding is just used to distance the text field from the phone screen so we can see it clearly you can just increase the padding and let's see as you can see the padding is increased a bit let's not see how to change the color the height of text field widget for that we have to we have to use a decoration Constructor and we have to pass the input decoration widget to it input decoration so in order to see the changes so for that we have to just give it a background color so we can see the changes fill is used to give the background color or just make the background color visible as you can see by the by default the color is is grayish and we can also give it a a more visible color like for that we have to use a fill color and we have to let's just give it a blue color as you can see it's now more visible so in order to change the color oops I'm saying color again again you have to change the height we have to use the S dance oops let's just give it some text and then we will see as you can see this text has some padding from top bottom right and left so let's just see how to customize the height for that we have to use the instance we takes a Boolean value but default is false so let me just set it to true and see what happened as you can see the distance the height is now changed and it's a bit smaller than the default one we can also use the is collapsed Constructor which also takes a Boolean and making it true let's see the changes as you can see making it true will just remove the height all the height it and the height will be just set to the height of the text as you can see in this example so in order to change the height or give it a height a custom height we can use the content padding as you can see it takes Edge inserts geometry so we can just pass it as in sets dot all which means give it a padding from all site and having the same value just give it a padding of 20. let's see what happened as you can see it it now has that this text now has a padding from all sides and the padding is same 20 we can let's just give it 30. see what happened as you can see the size the height of the text field is now increasing even more we can also use other Constructor other methods of edge inserts like agencies dot only is used to specify each site with the same padding or even different top let's see what it takes as as you can see it takes a double decimal value we can give it 10. now it will have a padding from only top I'll just specified top we can also give it a different or even same padding from bottom as well like this and it has as you can see left and right Constructor as well so if you still have any doubts then I written a detailed blog on content on padding as well in which you can learn all these methods in detail so the link will be provided in the description as you can see so this is how we can change or customize the height of flooded text field widget if you still have any doubt then you can click the link in the description I have written a detailed blog on it as well so do check that out thank you for watching this video

Channel: Let me Flutter

Views: 2,657

Keywords: flutter, flutter tutorial, flutter tutorial for beginners, flutter textfield, flutter textfield height, flutter textfield size, flutter textfield widget height, flutter textfield isdense, height of flutter textfield, height of flutter textfield widget, flutter textfield height customization, how to change flutter textfield height, flutter widgets, flutter app, Flutter Textfield content padding, flutter textfield iscollapsed

Id: gcU8GNtCzaU

Length: 5min 44sec (344 seconds)

Published: Sun Nov 27 2022