Flutter - How to Build an Ultimate Responsive App | Naresh Idiga | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Flutter - How to Build an Ultimate Responsive App

teacher avatar Naresh Idiga, Senior Android Consultant And Founder

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

12 Lessons (1h 12m)
    • 1. Build A Responsive App Course Preview

      2:19
    • 2. Responsive Design Theory Part1

      3:36
    • 3. Responsive Design Theory Part2

      11:39
    • 4. Responsive Design Theory Part3

      8:20
    • 5. Build A Responsive App - Introduction

      3:51
    • 6. Build A Responsive App - MediaQuery Widget

      6:52
    • 7. Build A Responsive App - LayoutBuilder Widget

      5:21
    • 8. Build A Responsive App - OrientationBuilder Widget

      0:55
    • 9. Build A Responsive App - Adaptive Components

      2:12
    • 10. Build A Responsive App - Summary

      1:07
    • 11. Build A Responsive App - Places App Code Walkthrough

      23:13
    • 12. Build A Responsive App - Course Conclusion

      2:14
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

144

Students

--

Projects

About This Class

Responsive design is an important building block of app development. This is an important skill that you should master. This course will build your foundation on it. If you are completely new to Flutter, check the course "Flutter for beginners" but it's not a pre-requisite for this course.

This course will provide you not only theoretical foundation but also practical implementation of Responsive Design in a Flutter App. First, you will learn Responsive Design Guidelines, Patterns based on Google's Material Design Responsive. And then you will learn how to implement these guidelines and patterns in a Flutter App. A full Flutter responsive app is demonstrated that works on Android, iOS and Web. You will be able to download the source code of this app at the end of this course. By the end of this course, you will be able to build a responsive app in Flutter that provides a great user experience on Android, iOS and Web.

For a multi-platform flutter app with a single code base, the app UI needs to adapt to any screen size and any device. In other words, it needs to be responsive.

Here are the challenges you will face when building a responsive app

How to handle your app UI for so many different screen sizes and devices on the market?

How many layouts would you implement for each app screen?

And what would change in each of these layouts?

Is it complicated and takes too long to build responsiveness?

In this course, we will address all these challenges.


By the end of this course, you will be able to build a responsive app in Flutter that provides a great user experience on Android, iOS and Web.

c519827d

Meet Your Teacher

Teacher Profile Image

Naresh Idiga

Senior Android Consultant And Founder

Teacher

Naresh Idiga is a Senior Android Developer Consultant, working for London based clients and Founder at Roboto Systems. For over 14+years, he has been working with clients of various sizes from startups to big companies like Motorola and HTC. He has over 10 years of experience into mobile apps development alone.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Build A Responsive App Course Preview: Hello and welcome to this course on building a responsive app in Florida. By joining this course, you will learn responsive design guidelines and how to implement them in your next flapper app. Here is an app that adopts to any screen size responsively. By the end of this course, you will be able to build this responsive app yourself. Compared this return unresponsive app here, this app's layout would work fine on a large screen, but when it's run on a small screen, it's hard to see. It's fond and interact with its user interface. It's app users would simply move away to another app. But when you build the same app with responsiveness and ops nicely via mobile device. For a multi-platform app with a single core pays the app Un needs to adopt to any screen size and any device. In other words, it needs to be responsive. Here are the challenges you will face when building a responsive app. How to handle your app UI far so many different screen sizes and your devices on the market. And how many layouts would you implement for each app screen? And what would change in each of these layouts? Is it complicated and x2 long to build Response units? In this course, we will address all these challenges. First, I will take you through the responsive design theory. Then I will show you how to implement these design guidelines and patterns in a flutter app. Not only that, I will provide a full code walk-through of the places responsive app. You will be able to download the source code of this app at the end of this course. By the end of this course, you will learn both design and implementation and you will be able to build your next flutter app that works responsibly on any screen size, any device, and any ways platform. My name is narrates yuriga. I'm a senior Android consultant and founder at rubato systems. I have been obsessed with app development for more than ten years, and I have been developing software for more than 14 years. I hope you enjoyed this course and learn the fundamental building block of developing an awesome map and really the discourse now and failure next flutter app responsively. 2. Responsive Design Theory Part1: indecision. Let's understand about how to implement responsive design in your app and provide a great user experience. Here is an example off an APP layout that is developer for a large screen, but it will result in a pool user experience on a mobile. Users cannot see what is going on here. They can understand what these icons are indicating. So an armed responsive design results in a bad user experience. It makes it really hard to use the app on, and your users will obviously move away to some other app. So Kendall Responsive Design in Under responsive design, we will try toe, adjust our app content, our app screen content to to various screen sizes so that our APP screen will look nicer on any kind off device. So here is YouTube app, appearing on a large screen eso that has taken on Mac ways. Chrome browser. So here you can see that you can the side navigation menu and each item we can clearly see it and and when when we moved to a 1,000,000 screen size, when I resize the window, the medium size you can see that side minnow is now collapsed in tow, Minuit icons and Labour's right. And then when I resize the screen to its small size now, the menu is completely collapsed and a button is provider for us to open the menu. So this provides a better, in fact, a good user experience for the users because now they can interact with the APP without any problem the respective off the size of the screen or the platform they're using. So what are the important things to consider toe implement a response you design. So Number one is how many layouts are you going to implement and then how to adopt our you I structure on Dru I components for various screen sizes and the water, some off the principles and patterns that you can apply. Eso that it makes your life easier when you are dealing with a responsive design because we thought any set off principles and patrons we will be lost will be thinking in our own customizer way. Then, when the when there are, you know, patrons that already solved the problems. So enter Google's material design and Google's material design rewards are some very good guidelines on how to implement a responsive layout so here we have one fundamental concept called responsively out grade. So responsibly out grade is simply means that we will imagine our scream as a greed layout containing set off columns. OK, eso. And for each screen size, we would imagine the number of columns would change. That is why we call it as a response you lay out great. 3. Responsive Design Theory Part2: so responsibly. Our grid has this concept that we need to understand in orderto implement them. We'll be going through each of them now and then in the next session, we will go through the patterns in world in the in, implementing responsively out. So in decision, we're going to focus on this concept. So let's take a look at a pixel density. It's a pixel density. What is picks identity. So pixel density means that the number off pixels tightly packed in the space. Typically, we use notation like a DPR V i P, which simply means the density independent big cells. A BP is a unit that is also called as different names on different platforms. For example, on Web, you would call it as logical pixels on I wish it is called As points on Droid. It is called as DP. The actual piece of exercise is much smaller, and you are tightly parking them and calling one logical unit, which may contain more than one pig cell. And there is, ah, another term called D P I. R P B I, which means darts foreign char pixels per inch, which simply means that in one inch how many pictures have bean packed by using the unit as DP Inside your app, you would have the U Y elements look as same screen size. It respect you off the screen density. So here on the left hand side, we have a low density screen on Dhere. We have a high density screen with more pixels Backer in the same space. But if you look at this floating action button in the circular shape, it would appear as same size on both the screens and ah, what are the other things that we need to know about DP or the logical pig cells? Uh, so here I have some examples toe explain it better. So we have some devices like an extra Stan, that is, containing ah, really tough for 12 80 dp and the height off 800 bp Esso. Which means it's ah, logical resolution is to a lady by 800. Whereas it's the rial resolution. He's actually 2560 pixels weird and 600 pixels high. So which means we have a density off to pick sells for our one dp or one logical pick cell . Okay, eso similarly for iPhone six Plus, you have three pixels for one logical pixel or one DP. So the rial resolution is, ah 1080 by 1920 pixels, whereas the large killer solution is for on four by 7 36 for iPhone six plus. So the screen sizes can change, but every screen size will be always be resolved into a logical resolution. And we're always that way will always define the sizes in your app, using the logical pixels so that they will freak the logical resolution, which will ultimately result in the ah real resolution. Eso that the majors or decide the sizes off the views they would all appear uniformly on screens off different density. Next on our responsibly were agreed. We have a few things like columns, cutters and margins. Let's take a quick look at them. Eso columns is nothing but how many number of columns that we are dividing the hourly out of it. So this is typically useful as a notation to understand well, so if you have a small screen, large screen and and medium screen and ah McKeel design guidelines tell us some recommended number off columns to use far suffer example here at 3 60 DP screen is recommended to have a four columns, but as a 600 DP size screen is recommended to have an eight column so size eso you are actually defining big dividing the screen in the number of columns. Oh, based on the screen size and then gutters are nothing but the space between the columns. So so So this is a four column screen, and we have the gutter off a size of 16 DP or 16 logical pictures, whereas on the tablet you have ah, 24 DP gutters and that this is off course at eight columns. Similarly, margins are the ones at the border off your views on this margin space. As you can see here on a four column, Grady will go with a 16 DP margin and on a tablet size or a medium sized screen. It is recommended to have a 24 DP margin, and also it is not necessary that you should always have bigger gutters or fixed gutter for each screen size, for example, here you can customize the grid layout with a small gutter eso here, even though this is a medium sized screen, the gutter is only a DP. This is to India, kid that So my album here has pictured and all these pictures are closely related. And they're all belong to one single album called My Alba. Well, there as here, uh, I'm displaying a list ofall bombs. And to indicate all these albums are unusual entities, you can have a larger gutter between there. And when it comes to margin, depending on what your buildings here I have a small margin so that I can have more space for thes closely related in majors there as well. Here I have a larger margin. I want to provide a good reading experience. And when it comes to the grid size itself, you can have these columns. Since we're dividing the grid into a number of columns for fluid grids, you can have these columns expand so the screen size. So if you're ah if you if the screen sizes medium, you can have the columns. Oh, expanded. Whereas under fixed greed, the behavior is that you can have the size of the columns fixed the size of the great fixed , and the margin is expanded. Uh, and this is really, like a preference and you Can they decide what to go for? Fluid grade are fixed grade depending on what you're building. Break points are quite useful to deter mined, at which point we should switch from one layer to another layout. So we use the screen victor as a factor and identify when the screen with Regis a second break point range. We switch from one layer to another early out eso here we have the break point ranges so material design recommence 600 BP also as the first break point. So anything below 600 dp we will implement It has a small layout. So it so any screen size that falls below 600 dp will always reserved in the on this same layout and for any screen wait between 600 to 8 at nine dp. We will define a medium lee out for anything about 8 40 we will define a large layout structure, so we have three different layouts. Ah, that will work for three different break point ranges. So this is the first break point range. This is the second range and that this is the third range. So here we have, like a detailed guideline. You can check out the material dot i will website on this table toe understand it more better. But the just off it is that you can have the greed as containing four columns. Oh, for a small lee out on and ah, eight column greed for you can divide you are 1,000,000 screen into a aid column grade, and you were larger screen into 12 column grade, and, ah, at the point at which you are going to switch between the small layout to medium lee out is 600 dp and ah, and from medium to largely out these 88 40 dp. So we are going to define usually three layouts on and, ah, just the layout structure. And we'll apply the response of patterns that we will learn in the next session to provide a great user experience off our each layout size. So to summarize what we learned in this session, we looked at what kind of problem in non responsive design will result in and how toe better design using responsive design principles. And we are actually ah, going with Google's material designed guard because it is solid and cowards many scenarios so under respond under material designed guide. One of the fundamental concept is responsively out grade, which is an imaginary agreed that we are going to divide our screen in tow. The greedy itself will contain a number off columns on the drill is going to have margins and gutters, and the pixel density is used toe declare uniforms sizes off across multiple screen density , and you can also have the greed itself customized with the slightly larger or smaller gutters and margins. You can have a fixed greed or fluid grid and finally break points, which will, which will tell us rain to switch our layout between small, medium or medium to large or wise Vorsah. In the next session, we learn about responsive design patrons, and they use them to arrange you. I confidence within a small layout, medium layout and a large layout. 4. Responsive Design Theory Part3: In the previous session, we looked at building a responsive layout using the concept of responsive layout trade, under which we imagined our app screen has a responsive layout grid. We defined the three layouts, a four column layout, a AID column layout, and a two column layout. To adopt our layout agreed, for various screen sizes. And for simplicity we, let's call them as small layout, medium layout, and a large layout. Now, let's look into response. You patrons. These patrons are quiet, useful to arrange UI components in a small layout or a medium layout and enlarge layout. Using these patterns, UI components can adopt their dimensions based on screen size and device type. Now let's take a look at each of these patrons. The rebuild pattern can be applied when our app screen size changes from small layout, 2m medium or large layout. When, when our app screen is showing a small layout, we are probably hiding some of the UI components to utilize the screen space. For example, here we have a side navigation menu that is hidden and on the small layout. And when the screen size increases to your medium or large layout, we can reveal this side navigation menu. And another example is that you have a tool bar in your app. And if honest, smallest green, you are probably just showing a very limited number of options. But when the screen size changes from small to medium and large, medium or large screen layout, then you can reveal more complex options. The next pattern is a transform. This pattern is quite useful when you want to transform one UI component into another component. For example, here we have a side navigation menu. And when we have a larger screen available, side navigation menu has been transformed into a tab bar. Okay? And another good example is when you have a simple list containing a single row items on a smaller screen. And when you are app screen genius to a larger screen, you can transform this simple list into an image list. Next is divide patron, using which when we have a multi row items on a small screen, you can display it as a single row when you have large space available. So when you are app screen changes from small layout to a medium or large layout, you can divide the single row, you can divide them multi rules into a single row. Another example of playing divided by r1 a's. For example, you have an AB bar on a small screen. And when, when you, when you are abstract genius to enlarge layout, you have more space available so you can show each of the AB items as an individual item as shown here. So here the Tab one is transformed into this box here. And tab2 is, is shoulder in this and next to it, because now we have more space available on the layout. Reflow is a useful pattern when you have a single column of items on a smaller screen and to transform them into a combination structure on a larger screen. For example, here we have three items, ABC in a single column on it, on a smaller screen layout. When, when it is transformed into a large layout, we have arranged with the combination in such a way that EA is arranged on the left side and B and C are arranged in a single column on the right side. Another good example of a reflow patron is at TimePicker widget. So here the time picker with Judy shown in, in a portrait and here it is in a horizontal landscape, more in the horizontal direction. So that I'm Richard is use adopted to arrange the clock on the right side and the time values on the left side. When you have a larger space available. Expand is another simple patron. There we use UI component is expanded on a large screen to fill a larger space. For example, here we have a cod item on your law spawned screen. And when you love bigger, larger space becomes available on a large layout. These card has been expanded. Another example for expand that to apply expand patron easier Dialog. Well, so the here the dialogue has been expanded from smaller size to a larger size proportionally. The next pattern US position. So a plane by applying this patron, you are changing the position of UI elements. So here is an example of a floating action button. This floating action button on a smaller screen, smaller layout is positioned at the bottom right corner. And on a large screen it is moved on to an intersection of an AB bar and the body of the screen. So far we have discussed about the responsive layout, grid guidelines and the response to patrons to apply on it. So now, coupled with this knowledge, you can design your response. You layout for your app screen. Once you design your app screen and develop it, you can test your app layout app screen layout using the tool material resources, not resize her. Go to this website and enter your app URL here, and testing various modes here. So you can test new desktop mode r. You can also test on a mobile or tablet mode. So here there are also the breakpoint ranges here. So you can test it to various sizes. And this is mobile and tablet more here. So this is a quite a useful tool to test the responsiveness of the layouts that you have designed and developed. That would I prefer your app screen. So here is the overall summary of the responsive design theory we have discussed so far. So this is based on Google's material design guidelines, based on the concept of responsive layout grid. So we imagine our app screen as a responsive layout grid. And we define free layouts. One is a four column layout and other is an aid column layout and other is a, and the third one is a two column layout. We simply call them as small, medium, and large layouts. And you end. The responsive layout grid provides guidelines on the margins and the gutters to apply for each kind of layout and also the response you patrons, that we need to apply when the layout size changes. So using these guidelines and the patrons, you can design responsive layouts for any of your app's screens. To see your working code implementation of this responsive design theory. Check out my video on implementing responsive design in Florida. 5. Build A Responsive App - Introduction: in the series off video tutorials. I'm going to show you how to Billy respond to APP in Florida. So here is a responsible app that changes its layers as its window size changes. So this is the small layout on, and as the window size changes medium, lee out comes up and then a large layered comes up. So here is what we're going toe build in this app. So we have three layouts that we need to build in order for our app to be responsive. A small layout and their medium Leo and a large layer on the small layout. We have the navigation menu hidden, and it can be revealed using the help menu button and on the medium layout. The navigation menu is revealed we because we have enough space available and on the largely. Or we show all the details, like the navigation menu and the gallery changed into a horizontal gallery. So here we have a vertical gallery on a medium layout. It is transformed into a horizontal gallery, and they're finally the place details which our place we have selected. Those details will be shown in the in the detail you pain here. So here is how our AB will look like on more bile. Uh, with the small lay out in the landscape, more chewing a medium lay our and on a tablet, it issuing a medium size layout by default in the portrayed and in the landscape, it has a larger space are issuing a large layer on down the desktop On the chrome browser thesis is the preview at various window sizes, a small window, 1,000,000 window and a large window before we get into the D days. If you haven't seen my video on responsive design theory or do check it out because it contains guidelines and patterns that we are going to use in this session toe apply on our responsive app on. And it also gives you understanding on why we are implementing three layouts and when to apply these some of these patterns. Now let's look into the implementation details it under the build responsibly arson flutter . Obviously, one of the things we must tackle is how does our app? No, it's window size has crossed a particular break point range so that we can switch our happily out from a small screen toe a medium screen size. And another thing to know is, How does our app know? The device has changed its orientation from portrait or landscape or landscape to portrayed , so that our layout can be adjusted accordingly. And the third important thing is, how does an individual rigid on the AB screen know that it has a new, larger space available and it can fill the space? So to solve these problems, Flutter provides us with a three main Richards called Media Query layout builder and or, in addition, pillar. Using these three Richards, we can build the responsively arson further off course for the provide so many usually useful rejects. Uh, these are very useful to Manny Plate are rearranging the layout structure on and you I components. Next, let's look into the main Richards how to use them and build responsive layouts. 6. Build A Responsive App - MediaQuery Widget: Media query provides us with APD window size which users wanted its current V8 and hide. It also provides as a device level information like what's the current orientation, platform brightness, and text scale factor. The way to get this information is to simply call media query dot off method by passing the context and you get all the data into meter query data, which has not only size information, but also the platform brightnesses, device orientation, and, and many more properties that you can use. Here we had the homepage of our responsive app called places in three different layouts is small layout and medium layout and large layout. Together, it provides a responsive experience to the user. Let's now take a look at the code on how to implement using the media query data. So here we have our homepage implemented as rigid and rejects bill method calls the media query or dot off meter, which provides us with the size information. And we pause this size information to emitter called gate screen size, which will tell us whether the screen size is small, medium, or large. If there is a small, then we are going to build a homepages small layout reject our, we are going to build a medium layout widget if it is a medium screen size and a large one if it isn't large screen size. So the code for the good screen size method is here. So here we have two different breakpoint ranges defined. And we use this breakpoint range to test what's current screen where it is. If it is. If it is below our first breakpoint, which is 600, then we considered the screen sizes small. If it is eight, if it is between six hundred and eight forty, then we consider it as a medium screen. Anything about the breakpoint range 840 is considered as large. An important thing to understand about media query Richard is that when you call media query method inside the big metal of every jet, that element that is going to be called every time there is a change in the media query data property. So you have a change in the size, it will be invoked, you have achieved in the device orientation, the beads metal will be called. You have a change in the extra type scale. Disbelief mentor will be invoked. Now that you know how to use the media query Richard and find out the screen size. Let's take a look at how each of these mentors, homepage small, homepage medium, and the homepage large are implemented. Let's start with the homepage small layout. The homepage small layout is implemented as a scaffold Richard containing an AB bar ended rover. And the drawer is the 1.The reveals the navigation menu. It is implemented in this method called our body. And the body itself is implemented as a rigid called pleases gallery that will result in showing this grid gallery with pictures, each picture containing the title and subtitle. Now let's take a look at the homepage medium called the homepage medium layout is also implemented as a scaffold reject containing an AB bar that shows up the title here. And notice that we don't have any drawer here because in the medium layout we have more space available. So we have combined that were navigation menu along with the grid gallery into a row widget. And the row rigid is the whole body containing two children. And both of these children are implemented as expanded rejects. Expanded we did provides us with the flexible which we can utilize to provide the amount of space that relate to each child will occupied. So here, if you observe the navigation menu is given a flex factor of two and the grid gallery is given a flex factor of five. So it means that the whole screen width is divided into seven parts. And the first two parts is given to the navigation menu and the remaining five parts and giving to the grid gallery. For implementing the grid gallery, we are reusing the same rejected pleases gallery that we have used in our small layout as well. Now let's take a look at a large screen layout implementation. Notice that in the large screen layout, the grid gallery is transformed from a vertical gallery to a horizontal gallery. And we have a new item appearing here, which is the place details. So let's see how it is implemented. So though homepage large is also implemented as a scaffold widget containing an AB bond and the rest as at row, the body is a row which occupies the fluid. And this fluid width is divided into four parts. The first part is given to the navigation menu, and the remaining three parts is giving to the container that contains the horizontal grid gallery. And please details widget. Let's take a look at how this container looks. So this container uses containing a horizontal grid gallery and please details that implemented as a column containing do children, we bought our expanded rejects. Notice that we haven't diverted the column into three parts. The first part is occupied by the horizontal grid gallery, and the remaining two parts is occupied by the obliques details reject. With that. Now you know how to implement three types of layout based on screen size information that you can get from the media query. So now you know how to use the media query reject. Next, let's look into the layout breeder rigid and how to use it for building layouts and rejects of different sizes. 7. Build A Responsive App - LayoutBuilder Widget: Using layout builder, you can build a layout or a Richard in varied sizes. One of the benefits with layered builder is it provides you with local size constraints for a UI component. For example, if you've rapid Richard inside a layout reader, every time there is a change in the AP window size, the build method will be called. And you will receive the box constraints which will have minimum weight, maximum width, minimum height and maximum height boundaries that you are Reject can take. But in case you are rigid, needs to cross the size constraints. Called Richard wants to go bigger than the box constraints provider, then you can wrap your child reject in a single child scroll you are, or flow reject. Similarly, if, if you need, you are rigid to be smaller than the provided box constraints, then you can wrap it in a align with Egypt Sadat. That object will be shown in the appropriate position in the world space available. Here is an example of a vigil that is built in two different sizes using Layout Builder. Do use layout reader. Simply return layout reader inside the emitter of the widget for which you are building. Once you've written the layout Bader from the build method, every time there is a change in the AP window size, the layout reader Bader method will be invoked. This builder method will pass as the constraints which contain the current min and max with min and max height of values. Using the max width here we are determining what, what is the current breakpoint ranges like. So if it is a crossing 600, we are building a large widget. If otherwise we are building a small widget. So here is a code to build a small reject. We have built the small Richard using a ListView containing the children. Because the layout items in this region are going to cross the height of the window. So we kept them to be scrollable. For this reason, we use the ListView. And the same thing can be achieved using a singles, single child scrolling widget containing the column as its child. And the column can contain the same children that we have here. So as you can see here, the, this, the first one is the image. And here we have the title section, and then we had the button section. And then we have the x section, totally for children under the ListView. And here is a call for the large Richard. Here you can see we have implemented a dislodge injured in a, using a single chair in the ScrollView containing a card. And the larger dirt itself needs to be scrollable because sometimes if you are doing the same thing on your mobile in landscape mode, the height may be very small, that you still need these widgets reject crawlable. The body of our large rigid is divided into two equal parts. And by using the expanded rejected by default, if you don't mention the flex factor for expanded rejected, it will be one. So here we have two expanded rejects as the children of a row. And this row becomes, is the body of the part of which is inside a single child scrollView. And the first child is showing all the image, the tidy learn the subtitle. And the second child is showing the Buttons section and the text section. So now you know how to use the Layout Builder to quickly recap, simply use the Layout Builder redundantly odd billion from the meter of the rigid which you are reading, use the box constraints coming into breeder mattered and desired what should be the UR Richard size? To compare the layout bidder with media query. Media query is quite useful to know AP level information and device level information. Media query doesn't provide any information at the visit level. But, but using Layout Builder, you'll get the box constraints which are and specific to the rigid we are building. Layered builder doesn't provide AP level information. So in summary, use media query reject, then you're dealing it hap level and use layout be there when you are dealing with rejects. The dark. Now you know how to build responsive layout using media query and the Layout Builder rejects. 8. Build A Responsive App - OrientationBuilder Widget: Apart from media query and Layout Builder, Richard, further also provides us with orientation Builder widget, which simply provides orientation. The US orientation builder simply return orientation builder from the meter of your rigid, very similar to the Layout Builder. And every time there is a change in the orientation, the orientation builders build method will be called and you get the current orientation in the orientation property. Based on the current orientation value, you can adjust your UI widget accordingly. So in cases where you simply need Waldo orientation, you can use our intuition builder. Otherwise, the Layout Builder and media query region will be Vin solid most of their problems to build responsive layouts. 9. Build A Responsive App - Adaptive Components: By using the concept of adopted components, you can take you a responsive app to the next level. The idea behind our optic components is very simple. Let's say you have a UI component as shown here. And by using the concept of adaptive components, you will build slightly modified versions of the same UI component as shown here. So here we have three categories. The first category is based on when you have more RED available. And the second, the second set of three layouts or bizarre when you have more height available. And this third one is based on when you are constrained, bought by a width and height of the reject. So that slightly modified versions come here based on the availability of the size and the device type you are dealing with. Let say you are widget has more width available than height. Then you can build these four variations. And you can see the difference is that here you have a subtitle, here, you don't have this updated. Similarly, you have a multi-line ideal here and no subtitles. And whereas here you have a subtitle. Similarly, when you have more height available to your reject than the width, then you can build these three variations here. The difference being this layout shows a subtitle, whereas the other two doesn't show. So this has a larger vert and the height compared to this one. Similarly, when venue or outward that is constrained by both weight and height, we are simply overlapping the title on top of the image. And this is a smaller version. This is much more useful to display on a device like a watch. So by using the concept of an optic components, you can build really rich user experience and make your app more responsive. 10. Build A Responsive App - Summary: So to summarize what we have done so far, we have built three layout, small layout, medium layout, and large layout for the homepage of our places app. And we use two media query rigid to query the current window size and decide between whether to build a small layout or a medium layout or enlarge layout. Then we use layout builder to build our UI component in small size and a large size depending on what is the current that box constraint that layered breeder has posed to us? We also discussed about the concept of adopted components using which you can vary. Slightly modified versions of your UI component and the rich user experience in your app. In the next video, I will take you through the complete code of the Places API that we have seen in the previous videos. 11. Build A Responsive App - Places App Code Walkthrough: In this video, I will take you through the source code of the Places API that we have seen in the previous videos. Here is the preview of our places at which a changes responsively as the screen size changes. So here is the source code of our app. This is our main entry point, places response, I'm Don dark, that contains the main function which calls our places. And V2s tasteless Richard, that implements a material app reject. And then we have our asserts glazed in assets directory. All of the images that are used in this app are present here. And we access these images by going to pop spec dot yaml and declaring iPhone assets slash images under assets. So it is important to make sure this formatting space stays here. Otherwise, flutter veil true error and that it is not able to find your images. And whatever the folder name you use here, this can be asserts and this can be images, and this can be anything you want, but you have to do that. You had the same name here. So as serves and followed by images. Our pleases, app and dense, only two pages, a homepage and a place details page. Like this is our homepage. And then you tap on any item, it will show you a detail page. And these two pages reuse the widgets that are present here. The place's details page uses the place details widget and the homepage makes use of the pleases gallery widget. And all the data that we need for our app is present in the model. We have list dot, dot, which has the class for representing the image, title and subtitle. And the places data dot dot contains the actual data that fill fill each of the blazed object with the data we need. We use all the images and President Obama SFC majors folder. And we have the title and subtitle for each of the item here. Now let's go through the court starting from our main entry point, the main method which calls the Places API. And the pleaser SAP is a material app and it's team is defined with the primaries fetch of deep, but we'll color. And then it has a homepage defined here. Our homepage is implemented as a stateful widget. The homepage state contains a state variable selected place, which will, which we will use to keep track of the currently selected place by the user. Our homepage state has a big method which implements three types of layouts. So our bill method calls media query method reliquary got off using the context. And then based on the media query size information and return, the good screen size will decide what is the screen size. And depending on the breakpoint the ranges we have defined here. So the good screen size material tellers whether the current window size is a small screen on a medium size or a large size. And based on that, we will be a derriere small layout are a medium layout RA largely out. So here we have the coal-fired home-based, small, home-based, medium, and Ambady large. Even though the older code is present in single file here. You can also move these reduced into separate files, which will make it easier as the code size of this homepage file grows larger. And the ADD BAD simply contains the text that we are showing in that ideal place. And that Brower body contains the code for the navigation menu that we show on the side. So let us go through each of these methods. Homepage small. So the homepage small campaigns as scaffold Richard implementation, which has an ad bought at grower and your body. So this AB bar shows that the tidal and this drawer implemented child called Brower body, which is our own method. There drop our body contains at least two U, which is building a dollar header and a least detail. We can see this robot here. When your app on this icon, it shows the header. Here. This is the header, is the header part and we can see here the remaining eigenvalue Clemson, Florida has, it dies listed diets. And the body of our homepage small itself is implemented as a breed view, scrolling vertically. The places gallery widget here implements the GridView. Now let's take a look at other methods. Let me minimize this guy so you can see what's going on here clearly. So we query them, reader query which uses the size and we read it's very and there's good screen size tells us what is the screen size like? Is it small, medium or large? We just had a look at homepage small structure. Now let's look at homepage medium. The homepage medium is also implemented as a scaffold of injured containing an AB bar and it contains a row as a body. Let's see it here. As we resize the window at some point it crosses the first breakpoint range 600 and reveals the navigation menu. So here in the homepage medium, we have a row representing the body, and the row contains drop our body as the first item. And though the places gallery as the second item. Notice that we are reusing the same method that our body that we have used, our homepage, small as well. And similarly, we are reusing the places gallery reject that we have used in the homepage small. Now let's take a look at the homepage large as well. So the homepage large and Dane-zaa scaffold widget implementation containing an AB bar and a role similar to the medium screen. And now it also has two children with a different flex factors. Led seed here. As we increase the medium-sized screen at some point it will cross the 840 db and it will enter a large layout, so it just crossed the aid for the VP. And now we can see the horizontal gallery coming up here and the detail view pan also shown up here. As you can see, the rho is highlighted in the blue color here, and it is containing two children. The first one is over side navigation drawer, and the second child is containing a container that contains again, do children our grid gallery, our horizontal grid gallery, and place details. Now let's take a look at this container called. So this container is made up of two, made up of a column containing do children do expanded rejects, one with a flex factor of one and a derivative flex factor of two. As you can see, this total height here waded into three parts. And one part is occupied by our horizontal grid gallery. And the two parks is occupied by the Place Details rigid. And the places gallery is now made to be shown as a horizontal grid view so far that we passed this property as true. Now let's jump into places. Gallery. The polices gallery is stateless widget that builds a grid view. And based on the property Johari, under GridView, it will show a diarrhea horizontally scrolling trade. Great. So in this case here it will show a horizontally scrolling grid by setting the axis as horizontal. This variable axis direction we are further passing to the grid view that we are building here. And the other case is the vertical direction, where event this property value is false. We said axis direction as vertical and item cone as two so that two columns will appear in the grid view. So here, this is a small layout where it is a vertical, what, where it is a vertically scrolling Gridium that has two columns. And in the end, this is a medium layout, which is also showing the same vertically scrolling GridView. Whereas when we come to the large layout, now, the GridView, we are passing the shore huddled under GridView property as true, so it results in a horizontally scrolling reveal. The places gallery grid items are built using the method, the grid items. The grid items metered simply fetches the list of places that these list of places are coming from the Class, places that we have, that we have and kept for with all the data that we need for our app. Once we get the list of place objects, the map method iterates through each of these place objects and agreed item rigid is built for each of the pleas object. And then all the grid items that are buried there, that are belt are converted into a list. And this list of grid items easily finally returned by that grid items mattered to the GridView as its children. Now, let us look into the implementation of the grid item itself. The grid item is implemented as a card and, and discard is further implemented as an inkwell Richard as its child. And inkwell will provide us with the patch feedback venom or your app on the item. And this contains a grid tie. As a child, this grid dial will this grit dial contains a footer object and this where, where using which we can provide our title and subtitle values and also set a at backdrop. So this results in, in a, in a grid item with a footer here, ok, with the background. And I planned a subtitle. And then we have the image, the actual picture here as an ink image widget. So whenever you tap any of these breed items, though, we receive a callback in the onPause method of greed ITA. And depending upon the current screen size, we decide whether to navigate to the d to Place Details page, or simply to update the details page here. So if we are in a larger, Sorry, if we are in a small or medium layout, whenever you tap on the grid view item, we will navigate to that believes details page. Otherwise, if you are on a largely out whenever you tap on any item, instead of navigating without blaze details page, we simply show the place details widget here. But how does over GridView pass the selected leaves details to this place, details would reject. It cannot communicate directly. There is no direct link of it. Plays decades widget. So someone has to take responsibility of taking the details. Selected place and pass that information to the please details widget. So because of that, we have our homepage widget implemented as a stateful widget and it keeps track of the selected place. And so whenever the grid item is tapped, the great item that the grid view will give you a call back to our homepage using a hand, please changed. If you have observed this handled place changed is a a method is a function called back that is being passed to our grid view. And this has been parsed from the grid view to the grid item as a input argument. Let's go back and see where it is coming from. So the places gallery receives handled place changed, that seem argument. And whenever we call the places gallery from the homepage, this argument is fast. And in the homepage we have this function actually defined here. So they know what the user taps on the grid item here. A callback is received by the homepage in this method called handled place changed with the new please details. And we simply update the new place details to the selected replace variable, the state variables that we're all here. And since we are calling the set state method here, it will trigger the rebuild of the homepage rejected. So it will call the method again. And now we have the selected place containing the new place details instead of the default place value, which is the default thing comes from the good places. And it will, it will harm by default, select the first item here. And, and now, since we have the new place selected, it will it when, when it is building the layout that whether it is a homepage, small, medium, or large. And in our case it is building a largely out. So and the largely art contains the place details as, as one-off, it's a child reject. And and this will now show up with the new place details. So what do we have done here is we have assigned the responsibility of keeping track of new places selected by the user to our homepage reject. And the homepage widget will rebuild the screen whenever the set state has been called an effectively setting the new place details with entity is building the homepage largely out of eight process the newly selected place as an input to our place details widget. Let's next take a look at the place details widget. The place details is stateless and rigid. It is buildings in layout bigger. This, as you understand the layout reader will give you a callback every tutor breeder method, every time there is a change in the AP window size. And you could passes without constraints that are available to. Our rigid based on these constraints, now we can be a very large reject, audio small reject. So in our case here we're building a large reject because it has more than 600 BP width available forever reject. Now let's take a look at the implementation of our large rigid. So the larger rigid layer is implemented as a single chairing the scroll you because discontent and needs to be scrollable. Sometimes the images can be bigger or sometimes the content here can go larger than the height available, so we need to make it scrollable. The single child scroll you campaigns card when today's its child. And delta card is this whole layout. And then, and then the card itself is implemented as a row as its child. So this row has two children. So one is the one in highlighted in blue color, and the second child is the one highlighted in green color. So the first child is an expanded region which contains a column as its chain. And this column is containing, again multiple children in the vertical direction, as you can see here. We have an image here that corresponds to this image. And I can section that is going to show this title subtitle lambda star and 41 here. And then the second child. And this is also implemented as a column containing multiple children in the vertical direction. And it has buttons, a section that implement these buttons, and followed by the next child containing that text. Let us now take a look at the small Vijay, a version of the pleased details widget. So here we have the large video games, small reject. Let's jump into small reject. Small rigidity is implemented as a ListView bit containing multiple children. You could also implement the same as a single giant ScrollView containing a single child as it as a column. And that column can contain multiple children and lead to the same code here. This small reject version will be shown in when our app is showing a small layout and when you tap an item, it shows up this small rigid version because it does not have a larger grid available. As you can see here, our ListView has four children. The first one is a image, and the second one is a tidal section showing this section of the layout. And then the third one is a button section showing these three buttons. And the fourth one is a text section showing that text at the bottom. Now you know how the place details which it has been implemented in a larger budget and spawn rigid version. Notice that we are using the same Places. Rigid, whether we are, whether we are at homepage, are whether we are showing the detailed page here. So displays details. Widget is pleased, is used in in a homepage as well as leaves details page. Here is a call for the place details page which is a stateless widget and it is being parsed the currently selected place as its input. And it is billed as a scaffold rigid containing an hour BOD. And the and it uses the place details widget we'd just gone through as its body. So here whenever the ADB window size changes, our place details widget changes from the small widget to the large, rigid as it has more width available. Now, what app navigates to, please details page on medium and small layouts on the largely out however, because we show the place details widget directly, we don't navigate to that please. Details page at all. So whether we navigate to place details page are we simply update the place details widget here is decided by the GridView greed item. Because whenever we tap on this grid item, we received a callback in the grid, grid items on bad method. So this is a cooled further grid item that we have previously gone through, reaches built inside the grid gallery. So these grid item contains the on-board third, which simply gets the current screen where using the media query. And we called our good screen size method to tell us whether we are dealing with a small size or a medium-sized screen are enlarged size screen. If it is a small or medium size screen, then we navigate to Place Details page. Otherwise, we simply call the callback method that we have defined in our home page and update the newly selected place details. And then our homepage will trigger your rebuilt because we call this method and we want the set statement that here our homepage will be built again. So now with that, we have gone through the source code of that places app. And you don't know how to build a responsive app using the media query rigid and the Layout Builder reject. And finally, here is how our places responsive app looks on a mobile. And they ablate. And on the desktop. 12. Build A Responsive App - Course Conclusion: If you have observed, we have applied guidelines from the responsive design theory. And we built three layouts, is small layout and median layout. And a large layout corresponding to three breakpoint ranges that we discussed in our response design theory. And we have also applied some of the responsive patrons. We have hidden the navigation menu on a small layout, and we have applied that revealed responsive patron whenever we have more screen width available. And we have revealed the side navigation menu. And then another pattern we applied is transformation of our world because our vertical gallery into a horizontal gallery. So that is the transformation patrons that we have discussed in responsive design theory. So as the screen size changes to enlarge layout, our vertically scrolling grid has been transformed into a hydrogen and a list scrolling grade. And we have applied the reflow patron on the Place Details rigid by moving half of the details into an adult pain as the screen size increases. So here we have half the details in the left and the other half of the details on the right. As we have more screen width available now. And finally, we have applied the simple patron expand by having our UI components are adjusting and expanding to the bigger space available as the screen size increases. So here, the navigation menu size has increased compared to when it was in a medium layout. And similarly, our place details widget also has increased in veil as the screen size increased. So with that now, we have gone through the responsive design theory and applied that guidelines and response to patrons and implemented them in further.