\n Please note that Foldable support has not yet merged into the Flutter repo. We first want to listen to your feedback<\/strong>, which you can give on the framework PR<\/a> and engine PR<\/a> before they are closed. Our goal is to empower you to easily build amazing experiences for all foldables.\n<\/p>\n \n There are many types of foldable phones out there already. Some have flexible displays that bend and curl. Microsoft Surface Duo has two separate displays joined by a hinge. In all cases, your app continues to see one larger single screen, with \u201cdisplay features\u201d like the hinge blocking part of the display.\n<\/p>\n \n Learn more about Surface Duo<\/a> and how it reimagines productivity. How would your app take advantage of the extra space? To experiment with it, have a look at the Surface Duo emulator<\/a>.<\/em>\n<\/p>\n \n Display features are areas of the display that can be non-functional or obstructed. Your app is already aware of one type of display feature if you use the SafeArea<\/strong> widget to avoid display cutouts. The three types of display features that we add support for are the cutout<\/strong>, hinge<\/strong>, and fold<\/strong>.\n<\/p>\n \n \n A cutout<\/strong> sits at the edge of the display and usually houses camera systems.\n<\/p>\n \n \n A hinge<\/strong> is a physical separator between the two displays of the device.\n<\/p>\n \n \n You can view the fold<\/strong> like a hinge<\/strong> that has zero width. It tells us where the flexible display has a crease.\n<\/p>\n \n For a complete reference, learn more from the display feature documentation<\/a>.<\/em>\n<\/p>\n \n Display features are properties of the display. This kind of information is provided by MediaQuery<\/strong>. We are adding \n<\/p>\n \n From the three types of display features, cutout and fold types will be used less often. You already use SafeArea<\/strong> for avoiding cutout<\/strong> features and you don\u2019t need to avoid fold<\/strong> features since the display is continuous.\n<\/p>\n \n When the device is folded, MediaQuery<\/strong> changes and your widget is automatically rebuilt.\n<\/p>\n \n \n For a complete reference, learn more from the MediaQuery<\/strong> documentation<\/a>.<\/em>\n<\/p>\n \n Dialogs show up on the middle of the screen by default. On devices with a hinge, dialogs go on the first screen, which is left for LTR configurations. We added the optional parameter screen<\/strong> to showDialog<\/strong> which allows you to override this behavior. Context or popup menus avoid the hinge by default. In double landscape mode, the first screen is the top one.\n<\/p>\n \n You might have your own modal or popup route classes in your app, which you want to make \u201chinge-aware\u201d. We provide a widget called HingeAvoidingModalWrapper<\/strong> which you add at the top of your route layout to make it avoid the hinge.\n<\/p>\n \n \n The above screenshot is taken from Flutter Gallery, which we enhanced to support dual-screen layouts<\/a>. Learn more about making your route hinge-aware by looking at the HingeAwarePopupRoute<\/strong> documentation<\/a>.<\/em>\n<\/p>\n \n In many cases, adapting your layout to support dual-screen devices will be as easy as adding TwoPane<\/strong>, a widget that shows one or two widgets according to available space. It provides a simple way to scale up your design, not just for two screens, but for larger screens like tablets and desktops as well. This sample should give you a hint of how it works.\n<\/p>\n \n \n The panePriority<\/strong> property makes the phone version show only one of the two panes, since space is limited. If you look at the tablet version, you will notice that widget A takes up only 30% of the screen. This is the value given to paneProportion<\/strong>. On a dual-screen device, both these properties are ignored, and widget A and B take over one screen each.\n<\/p>\n \nTwoPane<\/strong><\/a> has many useful properties, and we encourage you to read the documentation<\/a> to learn more.<\/em>\n<\/p>\n \n We want your feedback on the framework PR<\/a> and engine PR<\/a>. We can\u2019t wait to see what Flutter developers build with this new capability. Plus, you can ask questions or tell us about your projects using our feedback forum<\/a> or message us on Twitter @surfaceduodev<\/a>. \n<\/p>\n \n Please join the Flutter Community Q&A session<\/a> at 9am PST on Thursday, March 4, 2021 (the day after the Flutter Engage<\/a> event) to discuss the foldable enhancements. You can also chat with us on Twitch<\/a> on Friday, March 5 at 11am PST, and the Microsoft Learn Launch Space<\/a> on Thursday, March 25 at 1pm PST.<\/p>\n \n Microsoft is not stopping here. Building amazing apps for foldable devices using Flutter should be easy and fun and our next areas of focus will be navigation, codelabs, and more components to help developers. Your feedback is important for deciding what we will build next.<\/p>\n","protected":false},"excerpt":{"rendered":" Flutter is one of the fastest growing frameworks today and certainly a powerful toolkit for building amazing apps, which is why we\u2019re adding foldable support. Earlier today Microsoft announced a preview of foldable support for Flutter, at Google\u2019s Flutter Engage. We love Flutter and foldable devices and want developers to have the best possible experience […]<\/p>\n","protected":false},"author":54297,"featured_media":1368,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[31,693,46],"class_list":["post-1344","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-surface-duo-sdk","tag-dual-screen-development","tag-flutter","tag-surface-duo"],"acf":[],"blog_post_summary":" Flutter is one of the fastest growing frameworks today and certainly a powerful toolkit for building amazing apps, which is why we\u2019re adding foldable support. Earlier today Microsoft announced a preview of foldable support for Flutter, at Google\u2019s Flutter Engage. We love Flutter and foldable devices and want developers to have the best possible experience […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1344","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/users\/54297"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/comments?post=1344"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/posts\/1344\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media\/1368"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/media?parent=1344"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/categories?post=1344"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-json\/wp\/v2\/tags?post=1344"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Types of foldable devices<\/h2>\n
![\"Phone](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/03\/flutter-notch.png\")
<\/a><\/center>\n<\/p>\n![\"Surface](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/03\/flutter-surface-duo.png\")
<\/a><\/center>\n<\/p>\n![\"Image](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/03\/flutter-fold.png\")
<\/a><\/center>\n<\/p>\nNew in MediaQuery<\/h2>\n
\n
final hinge = MediaQuery.of(context).hinge;\r\nif (hinge==null) {\r\n print('No hinge');\r\n} else {\r\n print('Hinge is ${hinge.bounds.width} logical pixels wide');\r\n}<\/pre>\n![\"Surface](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/03\/graphical-user-interface-description-automaticall.png\")
\n<\/p>\nDialogs and modal routes<\/h2>\n
showDialog(\r\n context: context,\r\n builder: (_) => AlertDialog(\r\n title: Text(\"Hinge Aware Dialog\"),\r\n content: Text(\"Going on the right screen\"),\r\n ),\r\n screen: 1, \/\/ By default, this is 0\r\n);<\/pre>\n
![\"Surface](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/03\/graphical-user-interface-application-description.png\")
\n<\/p>\nTwoPane widget<\/h2>\n
Widget build(BuildContext context) {\r\n return TwoPane(\r\n pane1: _widgetA(),\r\n pane2: _widgetB(),\r\n paneProportion: 0.3,\r\n panePriority: MediaQuery.of(context).size.width > 500 ? TwoPanePriority.both : TwoPanePriority.pane1,\r\n );\r\n}<\/pre>\n![\"Three](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2021\/03\/chart-description-automatically-generated.png\")
\n<\/p>\nWhat\u2019s next<\/h2>\n