Creating responsive and adaptive apps
One of Flutter’s primary goals is to create a framework that allows you to develop apps from a single codebase that look and feel great on any platform.
This means that your app may appear on screens of many different sizes, from a watch, to a foldable phone with two screens, to a high def monitor.
Two terms that describe concepts for this scenario are adaptive and responsive. Ideally, you’d want your app to be both but what, exactly, does this mean? These terms are similar, but they are not the same.
The difference between an adaptive and a responsive app
Adaptive and responsive can be viewed as separate dimensions of an app: you can have an adaptive app that is not responsive, or vice versa. And, of course, an app can be both, or neither.
- Typically, a responsive app has had its layout tuned for the available screen size. Often this means (for example), re-laying out the UI if the user resizes the window, or changes the device’s orientation. 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.
- Adapting an app to run on different device types, such as mobile and desktop, requires dealing with mouse and keyboard input, as well as touch input. It also means there are different expectations about the app’s visual density, how component selection works (cascading menus vs bottom sheets, for example), using platform-specific features (such as top-level windows), and more.
Creating a responsive Flutter app
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
- From its
builderproperty, you get a
BoxConstraintsobject. 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 (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:
- Developing for Multiple Screen Sizes and Orientations in Flutter by Deven Joshi
- Build Responsive UIs in Flutter by Raouf Rahiche
- Making Cross-platform Flutter Landing Page Responsive by Priyanka Tyagi
- How to make flutter app responsive according to different screen size?, a question on StackOverflow
Creating an adaptive Flutter app
Learn more about creating an adaptive Flutter app with Building adaptive apps, written by the gskinner team.
You might also check out the following episodes of The Boring Show:
For an excellent example of an adaptive app, check out Flutter Folio, a scrapbooking app created in collaboration with gskinner and the Flutter team:
The Folio source code is also available on GitHub. Learn more on the gskinner blog.
You can learn more about creating platform adaptive apps in the following resources:
- Platform-specific behaviors and adaptations, a page on this site.
- Designing truly adaptive user interfaces a blog post and video by Aloïs Deniel, presented at this year’s FlutterViking conference.
- The Flutter gallery app (repo) has been written as an adaptive app.