Show a Widget Depending on the Available Space

In this lesson, we’ll learn to add responsiveness to the layout by showing or hiding widgets depending on the available space. We’ll start fixing the UI of the course application we implemented by using MediaQuery and LayoutBuilder.

Run the code below and observe the main screen. On a portrait smartphone, nothing is out of place. To navigate to the profile screen, we tap the “Menu” button on the top left of the screen. When the drawer appears, we tap the “Profile” button. In landscape mode or on a larger screen, the list of courses takes up too much space. Instead of a drawer, we could have a menu that’s always on the screen.