Tools and techniques available for responsive and adaptive design

Flutter provides different tools and techniques for developing responsive and adaptive design. Like CSS, Flutter also provides media query objects with details regarding device size, orientation, pixel density, and so on. Like Android, we can decide to build different layouts based on screen size and orientation if we choose to. In this section, we will learn about those tools and techniques. There are basically two things we need to make designs responsive and adaptive: the viewport size and the platform or device that it’s running on. Flutter provides ways to get this information. Apart from tools to provide this information, Flutter by default provides various widgets that allow you to lay out your design in a way that adapts to the changing viewport.

First, let’s talk about the MediaQuery (https://api.flutter.dev/flutter/widgets/MediaQuery-class.html) object. Flutter provides the MediaQuery object...