Flutter - Orientation and MediaQuery (Responsive Design)

how to create designs for portrait and landscape orientations in flutter simply use the media query to get the current orientation of the device and then based on it you can display the portrait or landscape mode for the portrait mode we display attacks portray and otherwise a text landscape with this we display by default support tree mode for the phone and also for the tablet mode if you change the orientation of your tablet or your phone then the landscape mode is displayed instead of getting the orientation from the media query you could also use the orientation builder whereas within the builder you get the orientation to check if your device is in portrait or landscape mode next instead of creating a separate portrait and landscape design you could also combine both of it inside of the same scaffold in this case we display a grid view with two columns for the portray mode and for the landscape mode we want to display three columns as a result we have two columns for the phone and also for the tablet if we change the orientation to landscape for the tablet and for the phone then we display three columns next you could use the media query to get the shortest side of your phone with this you can check if your phone is a mobile phone or a tablet device or any other device so if it is a mobile phone then we for example want to display a drawer in our scaffold otherwise we display no drawer as a result we have this draw menu icon only on the phone to open the menu next we wrap the grid view into a row and then we can also display before the grid view the blue sidebar if it is not a mobile device with this the sidebar is not displayed on the phone however on other devices such as the tablet or the web and for the phone we have this draw menu icon to open the sidebar [Music] you

Channel: HeyFlutter․com

Views: 15,719

Keywords: dynamic gridview in flutter, flutter gridview, flutter media query, flutter media query screen size, flutter orientation, flutter orientation builder, flutter orientation builder example, flutter orientation change, flutter orientationbuilder, flutter responsive, flutter responsive design, flutter responsive grid, flutter responsive ui, flutter tutorial, flutter web, media query flutter, mobile, responsive flutter, tablet, ui, web

Id: tPFcdb-OpGM

Length: 1min 57sec (117 seconds)

Published: Thu Mar 03 2022