Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
Creating Responsive Apps
(this page will be deleted once we move it to flutter.io -- see https://github.com/flutter/website/issues/1567)
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:
LayoutBuilderclass: From its
builderproperty, you get a
BoxConstraints. Examine the constraint's properties to decide what to display. For example, if your
maxWidthis greater than your width breakpoint, return a
Scaffoldobject with a row that has a list on the left. If it's narrower, return a
Scaffoldobject 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 (e.g. the user rotates the phone, or puts your app into a tile UI in Nougat), the build function will rerun.
MediaQuery.of()method in your
buildfunctions: 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
buildfunction is automatically rerun if the user changes the app's size somehow.
These other widgets may also be useful if you want to dynamically adjust an app's display: