Top 10 Widgets every Flutter Developer should know!

[Music] hey hello everyone and welcome to this new flutter video and this we're gonna be taking a look at top 10 widgets for flutter developers well I'm not gonna take an account which is such as columns rose container text and all these widgets I'm gonna be taking a look at other widgets that we use in our daily apps I hope this video will help out your flutter developers and other developers in general so let's get started okay so talking about safe area let's say we have an app in which we have this app bar and bottom list view so we can click on the items of list view and tell them it's all going fine so in some cases you don't really need this app bar you have to create your own custom container containing some buttons and the title to have customized animations and so on so you don't really need this app bar in that case so what will happen is when you remove this app bar and run the app again you'll see that the container moves into the status bar so for example let me just change the color of the container let me just name it color deep orange colors deep orange and when I save the app and run you can see that the container is moving into the status bar so in such cases what you can do is you can wrap your scaffold the whole activity container inside of a safe area so when you save the app and run it again you can see that the container has has moved below the status bar and it's in its own area so a safe area is really a nice widget which which tells your activity which tells your layout which is the safest area for it to layout its elements for example in some screens nowadays you can see that the that the screens are curved on the sides or you have a knot or something on the screen so it is not a good idea to display your contents behind the knotch okay so the safe area will save your activity or your layout from that whole mess and will give you a clean nice layout okay so if you use flutter you know if you want to arrange your elements in a vertical fashion you use column and for horizontal fashion you use row so in this particular case let's say I have three buttons and I want to display them in a row it works fine and I know each button is gonna take this much space and they're laid out perfectly let's say we have a situation in which the buttons need to display some sort of categories and the data has to come from the internet and we don't really know how much categories were going to display so there are gonna be more buttons but we can't really use row for that because let's say if I add another button here let's say at button 4 and my screen does not have in a space let's say I save this and okay so you have seen this or a yellow bar before and it says that there is not enough space to display the fourth button so this is a problem okay so I what I wanted was I want this button the fourth button to come below the other three buttons if I wanted to wrap to the other space so here here is what why the wrapped widget comes handy and what I'll do is I'll just replace the row with a wrap okay so now you can see that the fourth button is shifted down to the application and you don't have to do anything extra but add a wrap widget instead of using row okay so wrap widget also has another property that is called direction so by the direction you can pass if you want to display your elements in a horizontal or a vertical fashion just like rows and columns but here it's more flexible and in the direction you can pass access dot so it won't change anything because we already have a horizontal fashion and if I do here a vertical so when I save this you can see that the all the elements are displayed in a vertical fashion like a column and if there is no more space the elements will wrap themselves up and you'll have a nice flexible layout okay so I have a simple app here in which I have a textview and center of a container so what I want to do is I want to format the text in some way I want to keep retro portal as it is and I want to make studio bold with a red color so the first thing that comes into mind is we can create a column and add two text views to it but that doesn't seem so interesting so we'll be using a rich text widget here okay so for adding rich text I'm just going to add rich text here rich text that is a widget provided to you by flutter and in the text what I'm going to do is I'm not gonna pass text directly I'm going to add a text or span and what text to span is it takes a text which I'll be passing as retro portal Studio retro portal studio I'll just add retro portal here because for the studio I'll be adding another text span so let's add style to it and the Texas fan also takes a children property in which we can pass other texts fans also so here what I can do is I can also add another text span in here will be passing studio as a text and also a space before it studio and for the style I'm gonna copy the style here let me just copy it and paste it here okay and I also need to pass text here let's say text okay and in the style here I'm gonna pass font weight I'm gonna keep it font-weight:bold and a color of colors red so when we run the app again you can see that the retro coat will is gone only because I can pass color color stop colors black let me just run the app again and you can see that we have our top oral studio just the way we intended to be okay so I have an app with an image at its centre what I want to achieve is that I want to round out the edges of the image because there right now they're too sharp for my taste so what we can do how we can achieve this thing is we can wrap the image with a clip or rectangle widget okay so I'll just wrap the image with a click or rect and what a clip are rekt ik is a border radius ray is to it and you can see that the image in the widget is rounded off so you can also use clip are rekt with any other widget at its f as its child you don't really use to use image all the time and can just cut off the image and I can pass in a container and when I hit hot we load you can see that the container is also rounded off at at its edges by the clip are wrecked so basically clip are wrecked takes an element as a child and eclipses their edges to by the border radius that you pass it as an argument okay so media query is really a nice tool given to you about flutter SDK it tells us in depth details regarding the size the width the brightness and all sorts of details regarding the device that on which your app is running so how to use media query so for media query you need you need to add media query here and you need to call off context you need to pass in the context so you will have to call this method this function in a builds method to get the context is directly or pass it through some functions or so and from this you can get the size from which you can get the width and height of the image there are a lot more properties in the size itself and from the media query you can also check orientation padding and there are also options for brightness platfrom brightness from which you can get the brightness details also so right now I have a simple app in which I have two containers in a column which is given to us by this function get a layout elements it gives us a list of widgets and I have two cones which are child of flexible widgets with a flex of five so they'll be taking half of whatever the container they're in so right now I have a single column which is getting this get layout elements as its children okay so the app is looking nice but the problem comes when I rotate the device okay so let me just rotate the device now and you can see that what I wanted from this is I wanted one container to be on the left hand side and another to be on the right hand side okay so when I rotate the device back each element comes into its original position so how can we achieve that responsiveness so the one way is that we can check the orientation of the device using the media query so I will do that here I'll get orientation unlimited orientation from media query the off context and from here I'll get the orientation simple as that and what we'll need to do here is I'll just cut this function I'll just remove the column here and instead of this I'll be using a ternary operator I'll just check for orientation let's check if it is equal to orientation dot portrait if it is portrait then we're gonna do is we're gonna return a column or if it is not portrait then we're gonna pass a row and just format the code again and run the code on the app so it's looking fine in the portrait mode let's just shift it to the other orientation and you can see that I have one container on the left and other on the right so you can see how you can achieve more responsiveness in your app using just the media query Ridgid and you don't have to go to layout builder for each and every time okay so let's say that we have an app that loads data from the internet or from the database or from the assets of the app so this process takes time you have to get connected to the internet and take the data and then process the data and then displayed on the device so you need some sort of technique in which you can display something else on the screen for example a circular loading sign to show the user that the data is being loaded and when the data is there and you have it ready to go you can then show the ListView or any other widget to show the data to the user so you need to manage this process and this is exactly what future builder helps us with okay so let's say we have a simple app that you have something as some kind of JSON in your assets and you didn't you need to load that into your application so in case of dark that will return you a future that means it will try to get the assets and get the file and then decode that and give you the results so this will take some time as take some time and it will give you a result in the future okay so how future builder will fit into this is when in the container here we'll add a future builder future builder and in the future Brazil it will take a future that is the get context function that is right up here and along with this it will take a builder which will give us the context and the snapshot so basically what the snapshot is it's it's going to be the list of contexts that is being returned by the future okay so in here we can check if this snapshot dot has data then we can return a list view or else we can return a circular progress indicator or else we're going to be returned with a list of you and if the snapshot has the data we're going to take the data from the snapshot and then create a list from that and if there is no data then we're gonna show a circular progress indicator in the center of the app so let's see how it looks in the app and yeah it's gonna look I'm just gonna restart the app and yeah it's gonna load in the instant because it's in the assets but it's not to have a future builder so flexible is another widget that is given to you of a flutter SDK to make your apps more responsive so let's say I have an app here in which I have three containers in a single column I have given a height of 200 to each of the container so they're taking equal height in a single column what I want to achieve is that I want to give the first container 10% of the height the second container 50% of the height and the third container 40% of the height of the screen so there can be a way we can use media query to get the height of the screen and then divide the hire accordingly but that is not going to be more responsive in nature so we can instead use a simple widget called flexible what we have to do is we have to wrap the first container in a flexible widget and give it a flex property of 1 and we have to do the same thing for the other two widgets and remove the height so now none of the container is having its own height instead they're getting their height by the flexible widget that is covering each of the container so the reason why I give it a flex a 1 and a flex of 5 and a flex of 4 is because the flutter actually takes the total of all the flexes that are in a single column or a row so the point here is the total of the Flex is 10 that is 1 plus 5 plus 4 and the first flex is going to take 10 percent of the total height the second flex is going to take 5 by 10 that is 1/2 that is 50% of the total height and the third is going to take 40% of the total height so far around the app now you can see that each of the column in each of the container is divided according to the Flex property that would give it using the flexible widget okay so right now you can see that I have a simple button of hello world in the center of my container so what I want to do is I want to give a fixed width and a fixed height to this button so how can I achieve that so for achieving this simple thing what I can do is I can wrap my button with a sized box so a sized box is a widget that is given to you by flutter SDK to which you can give a width and a height so let's say I give it a width of 200 and a height of 70 and when I hot reload the app you can see that the button has taken the height and width of the sized box so sized box is basically used to give a perfect width and height to its child element okay so let's say you want the button to take the exact width of the container so in this case what you will do is you'll change the width of the science box to double dot infinity and when you refresh the app you can see that the button has taken the width of the container element and if you want to add double dot infinity for both width and height what you can do instead is remove both these properties and add expanded to the size box and the size box will take the width and height of its container element that is the container and will give the same width and height to its child element so the align property helps us in aligning a singles widget into its parent widget let's say we have a container here in which we have a single text that says hello and what we want to do is we want to align this hello to the bottom right corner so what we can do is we can wrap this text widget with the new align widget and give it an alignment of alignment alignment dot bottom right and refresh the page and you can see that the text has come down to the bottom right corner of the container okay so these are the widgets that I think every flutter developer should know and for more details you can always visit wizard catalogue at flutter dev and for more flutter tutorials don't forget to visit my channel retro portal studio and check out the latest flutter development videos and if you like the video to hit the like button and the subscribe button it helps a lot and thank you for your support see you next time peace [Music]

Channel: RetroPortal Studio

Views: 252,727

Keywords: flutter, flutter tutorial, flutter course, google flutter, flutter app development, flutter app, flutter ui, flutter widgets, flutter container, flutter column, flutter richtext, flutter safearea, flutter responsive ui, flutter flexible, flutter tutorial for beginners, top flutter widgets, flutter vs react native, flutter responsive, flutter android, flutter align

Id: hLLz_yzLWcU

Length: 17min 17sec (1037 seconds)

Published: Sun Nov 24 2019