Flutter Textfield Border Radius Customization | Flutter Tutorial | Flutter Widgets

hey guys hope you all fine so in this video tutorial we'll be seeing how to change the floater text field border radius so what that means is that it specifies the Border edges or corners so in this tutorial we'll be seeing how to customize them how to make them circular or shop so for that let's just start implementing it so first we have to implement a simple flutter text field widget save it and see what we get as you can see that it comes with a default underline border so let's just let's first change it to the outline border so every Edge will be covered for that we have to use a decoration Constructor and pass it input decoration widget like this and we have to pause the enabled border Constructor as we have discussed enable border and focus Border in our previous videos so to check that out as well for better understanding so very tall I will just pass outline input border I just forgot about it sorry for that so let's just save it see what we get as you can see here it comes with the this is the text field with the default outline border input border edges as you can see here they are a bit circular let's just give it some padding so so it will just look we just have some distance between the phone edges as you can see here this is the text field with the with the default edges so for that we have to use the Border radius Constructor in order to customize the edges as you can see here it takes border radius radius dot so as you can see here it has these methods so let's just pass it a circle method and give it a value 30. so with that let's just decrease the value for better understanding as you can see here if you want all the edges for the border to have a same circular value then you can use the Border radius circular method and if you want one or more of the edges to have some different value then you can also use a copyright method this is the copy with method and as you can see here it has four Constructors bottom left bottom right top left and top right let's just uh for demonstration we will just use the bottom left radius Circle we have to pass the radius Circle and let's just give it a value 5. as you can see here this bottom left corner is now a bit sharp as we have decreased its Circle value from 13 to 5 so you can just pass it zero if you want if you want it to be just completely sharp then you can use this so this is the Border radius door circular let's just use another value border radius dot horizontal let's see what it has left so radius circular let's give it a value of 16. and yes right Constructor I just pass the radiant or circular let's see 20. or you can just 24. okay I just save it and as you can see here by using the horizontal method we can customize we can just specify the left and right side of this flutter text field so left side means this left or this top left corner and bottom left corner and this right Constructor means top right corner and bottom right corner as you can see here the circle value of this left side is a bit smaller as compared to this right side so by using horizontal you can just customize this side like this if you want if you want you can also use a vertical method for that it has the top and bottom Constructors as you can see here you can customize the value you can give the value of your own choice it totally depends on you let's just give it a value of 40. as you can see here this vertical method specifies this top and bottom Constructors the top Constructor means the top left side and top right side while the bottom Constructor specifies the bottom right at the bottom left and the bottom right side so this is how you can use this vertical method as well and they just dive into this only method only by using this method we can give each and every its own value it can be different or same it only depends on you as you can see here it has four Constructors bottom left bottom right top left and top right so bottom left let's just give it a radio a circular then just copy it as we'll be using it again bottom right we will just give it a value of zero it's just for demonstration and top left we'll give it a value of 30. in top right just give it a value of and 50. let's save it and see what we get as you can see here each border has its own circular value so bottom right has zero Circle value this top right border has its more circular value and like this other borders has its own value so you can just specify each border with its own Circle each borders corner with its own circular value or you can just give it a same value it totally depends on you you can use a copy with method here as well but I don't think it will be a good practice but you don't use it you just don't need it here so this is how you can customize it you can also use copy with method with horizontal and vertical as well is the vertical and horizontal methods as well so you can try it if you want so if you want a complete written blog on it then you can click the link in the description in which free source code will also be available so do check that out as well thank you for watching this video

Channel: Let me Flutter

Views: 1,142

Keywords: flutter tutorial for beginners, flutter tutorial, flutter widgets, flutter widget tutorial, programming, flutter for beginners, flutter, flutter textfield, flutter textfield widget, flutter textfield border, flutter widget textfield border, flutter textfield border radius, flutter textfield enabled border radius, flutter textfield focused border radius, flutter textfield border radius circular, flutter textfield border radius only, flutter textfield radius horizontal vertical

Id: 8EMa1HJ-uMI

Length: 9min 8sec (548 seconds)

Published: Tue Oct 04 2022