📱How will Flutter handle iPhone Duo?
As a mobile / iOS developer, when I see Apple announcing new devices I can’t help but think at the technical aspects 😅
So, I did some research and prepared this summary, in case you’re curious too:
𝗧𝗵𝗲 𝗚𝗼𝗼𝗱:
On Android foldables, Flutter already provides MediaQuery.displayFeatures. It exposes feature type, posture state, and bounds for hinges/folds.
For a dialog or pop-up that should stay entirely in one pane, there’s DisplayFeatureSubScreen, which choses the closest sub-screen to an anchor point you’re giving it.
So, you can build the UI to look good for multiple sizes, and it will adapt according to the layout you’re using each time.
𝗧𝗵𝗲 𝗕𝗮𝗱:
The displayFeatures are documented as “Android only”. So, for iPhone Duo specifically, we need Flutter to bridge Apple’s new foldable-window APIs into the framework.
Besides the portrait/landscape and small screen / big screen switch, we have a new state to deal with: dual-pane layout 😬
This means we need to adapt the UI to more situations, and most likely to revisit navigation, create list/details flows, or deciding how to show modals, how to split the UI elements, and so on.
𝗧𝗵𝗲 𝗨𝗴𝗹𝘆:
In addition to the new layout, there’s also: handling state across resize and partial folds. You know, the laptop-like angle.
Do we handle it like a left/right? Like a full screen? Top/bottom? 😅 You’ve probably seen Apple’s videos, the native apps nicely show the main UI on the top, and controls on the bottom.
To leave you with some hope, in Flutter there’s DisplayFeatureState.postureHalfOpened for Android which reports this, so with some additional work, we can make our apps handle it nicely.
The next posts will be about how to work with this natively on iOS, with Swift, and maybe also with React Native if you’re curious. Stay tuned.
💬 What are your thoughts about the iPhone Duo and developing apps for it?
#flutter #iosdevelopment #mobileappdevelopment #programming #iphoneduo
As a mobile / iOS developer, when I see Apple announcing new devices I can’t help but think at the technical aspects 😅
So, I did some research and prepared this summary, in case you’re curious too:
𝗧𝗵𝗲 𝗚𝗼𝗼𝗱:
On Android foldables, Flutter already provides MediaQuery.displayFeatures. It exposes feature type, posture state, and bounds for hinges/folds.
For a dialog or pop-up that should stay entirely in one pane, there’s DisplayFeatureSubScreen, which choses the closest sub-screen to an anchor point you’re giving it.
So, you can build the UI to look good for multiple sizes, and it will adapt according to the layout you’re using each time.
𝗧𝗵𝗲 𝗕𝗮𝗱:
The displayFeatures are documented as “Android only”. So, for iPhone Duo specifically, we need Flutter to bridge Apple’s new foldable-window APIs into the framework.
Besides the portrait/landscape and small screen / big screen switch, we have a new state to deal with: dual-pane layout 😬
This means we need to adapt the UI to more situations, and most likely to revisit navigation, create list/details flows, or deciding how to show modals, how to split the UI elements, and so on.
𝗧𝗵𝗲 𝗨𝗴𝗹𝘆:
In addition to the new layout, there’s also: handling state across resize and partial folds. You know, the laptop-like angle.
Do we handle it like a left/right? Like a full screen? Top/bottom? 😅 You’ve probably seen Apple’s videos, the native apps nicely show the main UI on the top, and controls on the bottom.
To leave you with some hope, in Flutter there’s DisplayFeatureState.postureHalfOpened for Android which reports this, so with some additional work, we can make our apps handle it nicely.
The next posts will be about how to work with this natively on iOS, with Swift, and maybe also with React Native if you’re curious. Stay tuned.
💬 What are your thoughts about the iPhone Duo and developing apps for it?
#flutter #iosdevelopment #mobileappdevelopment #programming #iphoneduo
1.2K