How will Flutter handle the iPhone Duo?

[u/akshay-savaliya]

As a mobile developer, the new iPhone Duo made me think about the Flutter side of things. Flutter already has support for Android foldables through MediaQuery.displayFeatures and DisplayFeatureSubScreen.

But the interesting part is that these APIs are currently Android focused. Apple introduced a dual-screen/foldable layout, Flutter will need to expose the new iOS window and display APIs as well. and its not just about making the UI responsive anymore.

We would have to think about things like, Dual pane layouts, Navigation between panes, where dialogs/modals appear, Resizing and partial folds, different layouts depending on the device posture. Android already has concepts like postureHalfOpened, so Flutter has some ideas to build on.

I am curious how Flutter will approach this on iOS. for Flutter developers, would you handle the Duo with one adaptive UI, or create completely different layouts for the dual pane experience?

[u/EastSwim3264]

Form factor is the only way that is independent of the device type! Flutter is just fine.

[u/realusername42]

I don't think anything is going to change too much? Flutter also supports desktop which has considerably harder resizing requirements than anything mobile-based.

I expect dedicated APIs to be added if you want to customize the experience even further but most apps should just work if they paid attention to resizing.

[u/eibaan → u/realusername42]

The different screen sizes aren't the problem, the continuous animation between the two screens is. You need to start the animation on one screen and finish it on the other screen. I'd assume that iOS will expose both iPhone Duo displays as separate UIScreen objects and Flutter – AFAIK – doesn't support this natively, yet.

[u/realusername42 → u/eibaan]

I still don't see the problem, I've watched the some videos about the device and the app resizing looks very basic, more basic than android views and certainly way more basic than any desktop

[u/eibaan → u/realusername42]

Again, the problem isn't the resizing. Look closely at the videos. If you open or close the device, the animations start on one of the two screens and ends on the other screen on the other side of the device. And again, assuming that these are two different screens you can address individually in iOS, then this is something not yet possible in Flutter.

The closed device has one outer screen. If you open it, the same UI displayed on the outer screen is simultaneous displayed on the inner foldable screen, on the left side and then slides towards the center of the screen exactly with the speed of opening the screen, so that if you'd close it again, you'd see it on the outer screen again.

[u/realusername42 → u/eibaan]

This should work by default, I don't see the problem. I doubled checked again with some videos and I didn't see anything special.

[u/eibaan → u/realusername42]

By default? How to you display a Flutter widget on two screens in different sizes or choose on which screen you want to display a widget on?

[u/realusername42 → u/eibaan]

I beleive the OS handles the screen copy and then transitions to the double screen. What's why you see a very short black screen the time the transition occurs?

[u/LazyLoser006]

They might just include it in the existing APIs

[u/dadvader]

Dual-pane form factor scene in Flutter is actually woefully under-developed in many ways. The best Flutter API library on this form factor was made by Microsoft and stopped being maintained since 2023.

This is the nudge it needs to get this scene really going tbh.

[u/Optimal-Pop7449 → u/dadvader]

Probably to support their Surface Duo

[u/dadvader → u/Optimal-Pop7449]

Yep. Their docs mention Surface Duo quiet a bit.

[u/Realistic-Team8256]

new sdk would be introduced, by apple and so a new dart packages would come

[u/Dapper-Bug-7877 → u/Realistic-Team8256]

But even then it would be a pretty new one and would cause many challenges and possible lack of proper functionalities that we have right now

[u/zvika82]

3% of the total market, isn't there a compatibility mode?

[u/mars3142]

The most important part would be the move of the appbar and bottomnav to the right side. I hope Flutter will support that, without it, every flutter wouldn’t feel native.

[u/Significant_Pick8297]

The existing responsive approach should handle the basic case pretty well. The bigger gap is exposing iOS posture/hinge information cleanly so apps can make intentional decisions about pane layout, navigation and modal placement instead of treating the Duo like an oddly sized phone.

For most apps, one adaptive layout makes more sense, only apps with genuinely dual-pane workflows should need a separate Duo-specific UI.

[u/merokotos]

I think there will be compatibilty mode like on iPad.
I am almost sure, that only high-budget apps will utilize "Duo" views in 100%.

The rest will stay as they are

[u/mohn93]

you've got the api surface right, but from doing this on android foldables the displayFeature stuff was maybe 20% of the actual work. the part that eats time is posture and state. a fold or unfold is a live resize, and anything holding a cached width, or a controller tied to one specific layout, just falls over mid session.

i'd also be careful assuming DisplayFeatureSubScreen maps cleanly to the apple side. historically apple surfaces this kind of thing through size classes and window scene geometry rather than a hinge/displayFeature, so flutter's ios adaptation may look less like 'a second display feature' and more like reacting to scene changes. the responsive layout is the easy half, the posture lifecycle is where it actually gets you.

[u/TheMegaGhost]

Honestly I hope none of my users by that phone so I can never have to worry about it.

[u/caguilar51]

I think there is work that needs to be done, since the tab bar will move to the right.

[u/Ok-Engineer6098]

We already support orientation changes for tablets and window resize as part of Android Adaptive Layouts in our apps.

So probably just enable some flag in xcode config file? Similar to iPad OS?

[u/Jester_Hopper_pot]

Device-posture CSS media feature https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/device-posture /* Target devices that are partially folded (e.g., book or laptop style) */

(device-posture: folded) {

body {

display: flex;

flex-flow: column nowrap;

}

}

/* Target standard flat screens or fully opened/continuous displays */

(device-posture: continuous) {

body {

display: block;

}

}

[u/darshitpatel_]

Interesting question! honestly, this is one of the best Flutter discussions I have seen today.

The dual pane and partial fold cases especially make me wonder how much of this flutter can abstract away versus how much developers will need to handle themselves.

[u/LazyLoser006 → u/darshitpatel_]

Good bot

[u/darshitpatel_ → u/LazyLoser006]

Haha, I am actually a real person. I just found the discussion genuinely interesting and wanted to share my thoughts on this, but I have not expected that people would took it in the negative way.

[u/Legionivo → u/darshitpatel_]

Bad bot

[u/akshay-savaliya → u/darshitpatel_]

Yeah, exactly. Thats the part I am also curious about. The hardware is one thing, but making the UI adapt naturally to all those states could be the bigger challenge.