Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
92 lines (78 sloc) 4.39 KB
title description short-title
Creating responsive apps
It's important to create apps, whether for mobile or web, so that they are responsive to size and orientation changes.
Responsive

{% comment %} TODO: Once published, remove this page on the GitHub wiki: (https://github.com/flutter/flutter/wiki/Creating-Responsive-Apps) and forward to this page. {% endcomment %}

A responsive app lays out its UI according to the size and shape of the screen or window. This is especially necessary when the same app can run on a variety of devices, from a watch, phone, tablet, to a laptop or desktop computer. When the user resizes the window on a laptop or desktop, or changes the orientation of the phone or tablet, the app should respond by rearranging the UI accordingly.

Flutter allows you to create apps that self-adapt to the device's screen size and orientation.

There are two basic approaches to creating Flutter apps with responsive design:

Use the LayoutBuilder class : From its builder property, you get a BoxConstraints object. Examine the constraint's properties to decide what to display. For example, if your maxWidth is greater than your width breakpoint, return a Scaffold object with a row that has a list on the left. If it's narrower, return a Scaffold object with a drawer containing that list. You can also adjust your display based on the device's height, the aspect ratio, or some other property. When the constraints change (for example, the user rotates the phone, or puts your app into a tile UI in Nougat), the build function runs.

Use the MediaQuery.of() method in your build functions : This gives you the size, orientation, etc, of your current app. This is more useful if you want to make decisions based on the complete context rather than on just the size of your particular widget. Again, if you use this, then your build function automatically runs if the user somehow changes the app's size.

Other useful widgets and classes for creating a responsive UI:

For more information, here are a few resources, including contributions from the Flutter community:

You can’t perform that action at this time.