Get started with Flutter for Surface Duo

To get started, follow the instructions to download and install the Surface Duo dual-screen emulator on a machine that you have also setup for Flutter development. You can follow the Flutter Getting Started Guide if you don't have flutter installed.

Flutter Foldable Support

MediaQuery display features

The foundation for foldable support in Flutter are display features. They are parts of the display that create a visual distortion and can create a logical separation in the screen space. To learn more about how to use them, read the MediaQuery documentation.

Dialogs and popups

Dialogs and popup menus take display features into account and avoid overlapping them. To have better control over your dialog placement and popup behavior, read the Hinge-aware popup routes documentation.

TwoPane widget

We recommend working with higher level components if your project is suitable for them. TwoPane is a widget that makes it easy to populate each screen when your application is spanned. It also helps with tablet, desktop and larger screen layouts as a result. Learn more by reading the TwoPane documentation.

Working with the hinge angle

The hinge on the Surface Duo and other foldable devices contains a sensor that tells us the angle between the two screens. This is considered low level data and we recommend using display feature postures instead of the hinge angle directly. If your use case requires knowing the precise hinge angle, read the hinge angle documentation.