Flutter E-Commerce App and Admin Panel with Firebase - Market ready - Master Responsive Design in Flutter | Create Adaptive Layouts for Desktop, Tablet, and Mobile

Hello and welcome back to GoThing with T.

In today's tutorial we are going to learn how to create different type of loads for desktop, tablet and mobile.

We are going to create a reusable widgets that can be used to make our design responsive for all three variants desktop, tablet and mobile.

And also we are going to create one single widget so that instead of using these separate widgets we are going to use the one single widget which will be called as site layout.

And using that we are going to create our responsive design for desktop, tablet and mobile.

So let's quickly have a look what we are going to create.

I have opened this website and in here in this desktop you can see we have first of all a top bar or you can call it net bar then we have the sidebar menu on the left and over here we have the main body of our screen.

So whenever I am going to select any of this screen you can see the main body is over here.

The rest top and sidebar remain same.

But let's try to shrink it.

Okay in here when I am going to, when we are on the desktop screen when I am going to change it to the tablet screen and you can see the sidebar is gone.

This means that in this layout of the tablet we do not want a sidebar to be visible but instead we want to make this toggleable.

So in short in this design we have a top never and then we have a body.

Let's say we want to go to the dashboard and this is what we have.

Let's switch it to the mobile and in this you can see we have again a body and a top bar and the sidebar is also hidden.

So this is the layout that we are going to use for our admin panel.

So today we are going to learn how to create these layouts and how to use or how to create a site layout.

This is going to have already these three layouts.

So let's get started with today's tutorial.

So we are creating Flutter E-commerce admin panel and in this we are creating the responsive design which is a section 3.

In the previous tutorial we learn what is the responsive design and we are going to use the layout builder to make our design responsive.

So this is what we learn in the previous tutorial.

If you are new you can watch the previous video link is in the description so make sure to subscribe.

So let's get started.

So we are inside our app.

And in the previous tutorial we created these three things.

We created a responsive widget which we are using with the desktop tablet and mobile.

And currently you can see it is created.

The widget is being used inside a single class which is the responsive design class.

This means that by this approach we have to again and again call this responsive widget and we have to pass all these three things separately.

So we do not have any site layout.

So how are you going to create it?

So I am going to create it in the common widgets and in the responsive where we created our responsive design.dart where I am going to create all these three screens.

So inside the screens I am going to create three classes.

Okay inside these three screens I created a desktop mobile and tablet.

So first of all we are going to create a desktop layout.

If you see the desktop layout first we have this design divided into one single row.

So this is the row that is going towards the horizontal axis in this way.

And inside this row we have two widgets.

The first one is going to divide the left side which is this one.

And then again we have another one which is over here including headers including the body.

So right widget is going to have again a column with two things.

First one is a header and then we have a body.

So this is how we are going to create a desktop.

Now so first of all we have to create a row and inside that row we have to divide our screen into portions.

So as in the previous story we will learn the use of expanded widget.

So I am going to use the same.

I am going to create an expanded widget and you can use any widget but let's say we are going to use a broad widget over here.

And then as a second widget again I am going to use the same expanded widget so that our design should be flexible for the last screens.

Because desktops are in different sizes so we want to make sure that our design should adopt all these sizes.

So the right side will again have some let's say containers or use already created containers.

So inside this container I have created a width of infinity so that it can cover all the space and then height as 500 also add a background color so that it can be visible.

So I added a color, height and width.

Now let's try to run this application.

So first of all we have to make sure the desktop layout is called from somewhere and before doing that we also have to create our tablet layout and mobile layout.

Okay the right side is created with the container but remember we have to first create a header and then we have to create the remaining body.

So we have to use a column and in that column we will have two charts.

I am going to consider this as a body and then this one will be header.

Let's say header is a height of 75 and it's width is again going to take all the space and its background color we can change it to yellow.

Now our desktop layout is complete and to make it reusable we are not going to actually pass the desktop like this but we will get this body from wherever this widget is going to be used.

So for that we have to create which can be nullable so we are going to instead of using this body we are going to pass the widget.

This means that whatever the widget will be passed inside this desktop layout it should be displaying that like in this manner.

So if this body is not null then we want to display the body.

Otherwise if it is null we want to display a container or you can display a simple slice box.

So desktop layout is completed.

I am going to use this same approach for the tablet and mobile but this time you can see we do not want to use the abbar or the header in this way and also we do not want to have sidebar which is going to take equal space in a row.

We want to hide the sidebar so instead of using this row now I am going to inside this scaffold.

First of all for the sidebar we are going to use the drawer and drawer will be displayed over here and then for the abbar we can easily use this appbar property and over here let's say we want to use this appbar whatever it is.

So this means that we do not need any of these things but a body over here inside this body we are going to replace this complete code with a simple body and if body is null we want to display the size box.

So with this same approach we are going to use the same for the mobile design.

Once we have these three layouts ready it's trying to use these three layouts inside our website layout so that we can easily toggle them whenever and whatever is required inside this layouts in the templates I'm going to create side template inside this template.

So in this template we created a side underscore layout basically this is the actual widget that we are going to use as a website or the admin panel layout so I've named it as site layout or site template and inside currently we only have a scaffold what this site template is going to do.

It is going to use our this responsive design widget which will be using the layout builder and using this layout builder it is going to decide that if we want to display the desktop template and mobile which we learn in the previous story.

So by using these things we have to provide desktop, tablet and mobile and automatically we will be able to see relevant layout we are going to use that inside this scaffold I'm simply going to call the body and we only need to call this tea responsive widget which we created in the previous story.

So in this we have a desktop, tablet and mobile so currently we have a simple container assigned to them but like we have over here we're going to use these three widgets so that again we can get these widgets from any screen who is using this widget and use them as a parameter but this time I'm not going to make this as required any of these and make them nullivate.

Okay so inside this desktop you can see we have the desktop mobile and tablet layout already created and in each of them it requires the body which we want to display inside this desktop and inside this I'm going to use the desktop and inside desktop layout you can see we can provide the body widget so in the body because it is a desktop so we will assign the desktop widget to this desktop layout and automatically this widget will be used as a body widget and we will use it.

We will be placed right where we want it it is not going to affect our header it is not going to affect our draw or the top navigation so sidebar and the top navigation will remain intact and the desktop will automatically be assigned to this desktop layout over here and this responsive widget will automatically going to detect if we want to display the desktop or the device size is the tablet or it is mobile.

The same way I'm going to assign tablet and while live so by this way we have desktop tablet and mobile assigned to desktop layout tablet layout and mobile layout let's say we do not want to use the tablet layout or we do not want to create a specific screen for the tablet.

We want to use the desktop as tablet as well so if the tablet is now then we want to use the desktop widget and again same for the mobile.

If mobile is now again we want to use the desktop widget so now our design is complete but over here I'm going to add one more thing.

If you see this design and I'm going to click on this lockout and now you can see in this layout of this login screen we do not have any header, any top bar, any sidebar but we only have our own body widget.

This is the login design in center.

If I'm going to click on this forget password remain same.

This means that we need a variable over here when we do not want any desktop layout tablet layout and mobile layout but we instead want simple responsive widget to be used instead of these layouts so we can do that here as well.

By creating a simple flag or a simple Boolean variable use layout also we're going to use this or make it required but not required because most of the time we are using this layout I'm going to make it as true by default and I'm going to modify this.

Now in the desktop let's say first of all we're going to check that if we want to use layout which is by default true this means we are going to use the layout and we're going to use the desktop layout and pass the desktop widget to it and the desktop widget will be displayed.

If this is not the case we do not want to use layout but we want to use whatever is inside this widget like in login we only going to pass the login design in center so this desktop will contain the center login design.

We want to display that and again if this desktop is also now then instead of crashing or application we want to return an empty container.

So same way for the use layout we want to display the tablet with the tablet layout.

If there is no tablet layout we want to use the desktop layout and same if we do not even have any layout that we do not want to use the layout then in that case we will go for the tablet or if it is null we will go for the desktop else we will go for the container same for the mobile.

Now we are done with our site template and we are going to use this one to see if we can see our layouts.

If you open the app or dot in the previous tutorial we were using this t-responsive widget and passing our desktop tablet and mobile we were not having any layouts at that time.

So what I'm going to do I'm going to replace everything written over here with the P site template and inside template we can provide desktop, mobile tablet and definitely want to use the layout and then we will try to remove this layout as well.

So first let's go for the desktop, use the desktop screen in the tablet, use the tablet screen and same for the mobile and by default because use layout is true so that's why we are not going to do anything with the layout now try to run our application and make sure that this screen should be triggered as a first screen.

Okay you can see our design as a body it is being appeared over here at the top we have the app bar then we have the body and then on the left side we have a broth that we will fix in a few minutes.

This means that we are currently displaying or viewing the design inside a desktop screen so let's try to minimize it and now you can see we have the app bar over here with the drawer that is going to be empty.

And then over here we have a body down below and same should be inside over mobile app because it is not yet scrollable so that's why we can see the overflow from the bottom not worry about it.

So this means that we are fixed with the design but with the desktop layout we have to fix this one so let's go to the desktop layout and in here you can see we have two expanded.

The first one is expanded with the drawer and the second one is expanded with the app bar and the body so we want to use the maximum or want to give the maximum space to the body.

So inside this expanded we are going to use the flex property and I am going to give this flex as 5 this means that this expanded should take 5% 5 times more space than this.

So by default this expanded has a flex 1 so now let's try to save it and you can see now the drawer is taking minimum space with the never or app bar at the top and then we have a body over here.

So the body over here when I am going to shrink it you can see the sidebar is also adjusting itself and the body is taking the 5 times space of our sidebar until it is going to reach to a point where it should convert itself to the tablet mode and this is the point where it has been converted to the tablet mode.

And before that we have a sidebar over here.

You can see we can maximize it.

We can see this screen in a large desktop which is a 4k resolution and it is working very much fine.

Now let's have a recap of our quote inside this app product.

Let's say we have created a screen and let's name it a dashboard screen or user screen or whatever the screen name is.

Let's say we have a dashboard screen inside the dashboard screen we are going to use the P side template and we are going to pass a desktop tablet and mobile.

Let's say we do not want to pass the tablet mode we only want to design our desktop and mobile then we can simply remove this.

We can save the code.

Now our desktop and mobile design should be appeared in the UI and also the tablet mode will remain same as the desktop mode.

So let's see it.

Let's try to reduce the size and enter into the area of tablet.

Okay, when we are going to enter into the tablet zone and you can see we have entered into the tablet zone.

Whatever design is same, our screen does not change itself and now when we are going to enter into the mobile zone then only it should take.

Change our order let's say we also want to remove this mobile as well and we want to use the desktop layout and you can see.

Even if though we are inside the mobile zone still we are using a desktop in the mobile then in the tablet and then inside of it actual desktop mode.

So this is how we are going to use we only need to declare the site template and then we are going to create dashboard screen for the desktop tablet and mobile and we have a desktop.

Let's say a desktop of our dashboard we are going to create a separate straightless widget for the desktop dashboard same for the tablet same for the mobile and once created we are going to assign those classes to this one and rest everything will be managed by this site template.

And what this is going to do it is going to get these desktop tablet and mobile widgets and it is going to check if we are using this layout or not and if we are using this layout.

So it is going to pass these desktops as a body into these widgets.

Desktop body will arrive over here it is going to display the drawer at the left side then as an expanded on the right side it is going to create a column with first header at the top and then we have a body.

So this is how the flow is going to work and automatically this responsive widget will decide which widget should be appeared in front of user based on the device size.

So that's it for today's tutorial and one more thing inside this app or dark let's say we are going to test it by using use layout as for this means that we do not want to use layout and what should happen this pillar should be gone box one and box two should push the top border and also this left drawer area should be removed.

So let's try to save it and you can see the drawer areas go on the top areas go on now we are using our actual widget but it will remain responsive.

You can see now it's entered into the tablet mode and box six changes its position you can see it one more time box six from the road to a column and then inside our mobile you can see they all stack on top of each other.

Like they should be inside the mobile so this is how we created one single widget this one which is going to handle all the responsiveness for us and now inside our next room is we are going to design the top or the top app or and then after that we are going to design the side bar.

So that's it for today's tutorial I hope you learned something new and if you learned something you please like the video and if you are new to this channel make sure to subscribe on the YouTube so if you have any questions you can ask me on the comments thank you for watching and take care.