Responsive Design

[00:00:00]
>> But before actually compiling the app, let's say you're going to create a website, a web app. What happens with responsive design? Look at that. It doesn't look like really nice, right? So it's like, really big. So how responsive design works with Flutter? There are many ways to solve the responsive design problem.

[00:00:26]
Let me go back to the initial view. For example, if I'm going to the offers page, one way to work is to create the property with a media query similar to browser media queries. So for example, if we want this screen size, we can say MediaQuery of the context we receive.

[00:00:51]
And we can query about a lot of stuff, devicePixelRatio, gestureSetting, and we have size, okay? So this is the size of the screen. So actually, I can make conditions here. If the width of the screen is more than 500, then I'm going to return this view. If not, I'm going to return that view.

[00:01:16]
Yeah, you need to do this manually, right? But then you can have a large viewport and a small viewport with media queries. Also, the other way, sometimes instead of using a ListView, for example, there is another word called wrap. Wrap would actually make the trick pretty simply. So if I go to offers now, wrap, what we'll do is we'll try to wrap the elements.

[00:01:43]
So maybe what I need is to also fix the offers, Not just in the height, but also in the width. By 300. Have a typo. So if I go to offers now, the wrap widget would actually try to wrap the elements if there is no space, okay? Well, then you can center, you can play with this, but wrap would actually work like float in HTML, okay?

[00:02:20]
So with media queries and wrap, you can start making decisions about your user interface.
>> I haven't used this kinda implementation, but in other projects, I used the inits, one of the lifecycle hooks to grab the data versus using the-
>> Futures.
>> Yeah, so just something, a different style.

[00:02:42]
>> No, the thing is that Flutter had different versions, and also Dart had different versions. So if you have been doing Flutter since the beginning, maybe you're not using all the techniques that we've seen today because they were added over time, okay? So there are many things that were added over time, so maybe that's why you are using that technique.

[00:03:03]
Also, maybe because you are using a different design pattern. So typically today, we prefer futures that the future builder will actually help you a lot to work with async programming.