Flutter UI Widgets

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

Making your apps adapt to different screen sizes is essential in giving your user a good in-app experience. Flutter offers us various widgets to help with building responsive apps. But do we really need this for our app? Well, let's find out. I'll change the device orientation to landscape mode. You can see that the article card widgets doesn't really look nice. They are quite big for this view. While developing apps, we need to test on multiple devices and orientations to make sure that your app adapts to different screen sizes and modes. There's no room for, oh, it works on my device and it should work on your device too. That's an absolute no no. The first approach we'll explore is the use of the media career class. This class is already added by the material app and it is updated whenever the screen dimension changes. A common example is when you rotate your device. The media for your class gives us access to stuff like the screen size and device orientation and more. To access this information, you simply use the media creators off method. Note that using this method would automatically rebuild your widget if you change the screen size, by let's say rotating your device. The starter project for this episode includes a different card layout that will use a row widget to display the article image, side-by-side with the article detail. This will be displayed when our device is in landscape mode. Currently, the default cut paste the TallCard, it contains the same code that we had previously. But this time around, we extracted it into a new widget called TallCard. While the other we did, that uses a Row, is a WideCard. Make sure you go through the code to see how I created those widgets, and do check out the CardBanner we did too. Cause I added a simple logic for the WideCards to make it adaptable. Now let's update our card widgets to use this, enter the following code inside a build method of the article Card class. In here, we checked to see the device is in portrait mode. We get that information from the orientation getter. Then if the device is in portrait mode, return the TallCard, else return the WideCard, and that should update that to the WideCard, not the TallCard. Cool. Now save your work. Let's go ahead and try it out by changing the device orientation. You can see that the WideCard is displayed in landscape mode. Remember, whenever the screen size changes the media grader's off method, reduce the widgets with a new appearance. Notice that the space in between the column items for the Card detail doesn't really look good in landscape mode. We want more space in between them. We can also use the information comes in from the media creator's off methods to solve this. Scroll to the CardDetail widget and update it like so. First, switching, the pattern widgets into a Container. We do this because the pattern we did doesn't have box related properties. Then we give the Container a height of 160. If the device is in portrait mode, else, we give it the height of 150. After that, we removed the SizedBox because we have given the enclosing Container a height, which means that the main axis alignment of the column can now add spaces between it's children. In other words, you don't need a size box and space in. If the enclosing container has a fixed height, and the column has a main axis alignment. Save your work. And you can see the children of the column are more spaced out. The media career class works best when you want to adapt widgets based on device orientation, but using the media creator's off method always calls the view method when the screen size changes. This is not really a bad thing, but we have another widget that could help us with this. Flutter provides us with the layout view of our widgets that helps adapt widgets based on their appearance size. The building of the widget is postponed onto layout because it needs the parents size information. Let's change our code to use a LayoutBuilder, update your code to the following. The LayoutBuilder that has a builder callback function that is called at layout time, and provides experience widgets box constraints. Now, the box constraint is simply the size information of a box. Next, it's checks If the maxWidth of the parent box is greater than 600, we show that the device could be tablets. If it is a tablet, we return the WideCard. Elsewhere, you return the TallCard. Oops, this should be the WideCard. And the second one should be the TallCard. That's what you get when you copy and paste code unnecessarily. Note that the width is that of the parents widgets, and not the screen width, but remember that the card is inside a list view, and the list view takes up the entire screens width, so you get the same effects, save your work. It looks like there's another arrow. And I can see that red sign on the scroll bar. Let's scroll to that position. And you can see, the length complains that the code we've permitted out is greater than 80 lines. I'll fix that now. Then I'll save my work and try it out. And there you have it. The layout of updates accordingly when the parent's widget suite is greater than 600.