The main selling point of flutter is being able to write one program, using one language (Dart), that can be used for all the different types of platforms.

But you will quickly run into a huge problem. If you’re developing an app for a phone, and you don’t consider the layout and how it will look on desktop, you will have a very ugly desktop app.

Conveniently, Flutter provides very powerful solutions for this. You can use MediaQuery and LayoutBuilder to have separate layouts for the different devices.

MediaQuery

MediaQuery doesn’t directly help you change the layout, but using MediaQuery you can get lots of information on the type of device that you are using. You can get the size of your screen, orientation, and even user preferences. Then once you have this information you can set up conditional statements that will return different UI for the different screen sizes.

LayoutBuilder

LayoutBuilder is directly implemented to solve this problem. It gives you the constraints of the screen, which will provide to you the width and the height of the area you can work with.With that you can decide how your layout is going to look depending on the screen size.