Text Field in Flutter / Search Bar Design | Deeply Explained

foreign [Music] and then the first child will be a text field and now we see that the text field appeared and in order to style this text field we need to add an input decoration so let's have the property decoration input decoration and then the first thing we'll do is add a border outline input border and we're going to give a border radius dot circular 30.0 and that gives us the rounded corners on our border and then we also want to make the Border less thick so we can add the property Border Side Border Side with 0.8 save and if we deselect the text field we see that the border is less thick next let's add the in text in text search food or restaurants and then we also need to have an icon in the beginning and an icon at the end so we're going to set the prefix icon icon icons.search and we'll set the size to 30.0 and then for the icon on the right side that would be an icon button where you can click it so you can clear out the text in the text field so we'll do suffix icon icon button icon icon icons dot clear and then we just need to add a non-press method in order to reduce the size of our text field we can add some padding around your text field by hovering over the text field hitting command period and then clicking add padding and we'll set the padding to agents that's not all 20.0 after that if we go back into decoration let's add content padding Edge insets dot symmetric and we'll set vertical to 15.0 and we see that the search bar tightened up

Channel: Fixit Tut

Views: 4,209

Keywords: flutter tutorials, how to learn flutter, flutter for beginners, flutter scratch course, flutter from basic, flutter basics, flutter animations, flutter ui, flutter transitions, flutter designing, flutter ux, flutter cubix, flutter provider, flutter coding, dart programming, flutter for absolute beginners, flutter clean code, flutter for everyone, flutter easy understanding, flutter desktop applications, flutter mobile applications, flutter ios applications, flutter

Id: OBBT41yKkjY

Length: 2min 52sec (172 seconds)

Published: Sun Nov 06 2022