Dialogs, Circular progress Indicator is showing only left side of screen in Folding Device. Samsung Z fold 4

Question

Dialogs and progress indicators are showing on left side of folding devices not in center.

How can I show progress indicators and Dialogs UI in center of Display in Folding Phones. Example- Samsung Z fold 4.

I uses showDialog

showDialog(
      context: context,

and dialog is showing on left side only in Folding Phones.

Answer 1

Since there is barely any documentation about how Flutter handles foldables, I figured I'd add my two cents based on my short time looking into this. Keep in mind this isn't documented very well at a lower level. So it may change.

Firstly, foldable support was added when Flutter 3 was announced. As you can see from that post, dialogs appear to work like that out of the box.

But it's not that simple. I have a flutter app and a fold5. When I'm using the fold screen fully open, it works as a tablet app would work. Dialog shows in the center. Life is good. But when I partially fold it that's when the flutter foldable logic really kicks in. Which makes sense.

Where it gets weird is using the 7.6 android foldable emulator. Which is the emulator you have showing. By default the DisplayFeatureType is DisplayFeatureType.hinge when open. But there is no visible hinge on the emulator itself and the state is "open". There doesn't appear to be a way to test all states in the emulator. When running my app on a fold5 I can confirm the dialog and bottomsheets do in fact take up the intended width when fully open. But when you fold it slightly, the dialogs move to the screen that matches whatever anchor point you choose. See the anchorPoint parameter. This means it properly updates the DisplayFeatureType.

For those interested, see the source above where dialogs are shown. The specific widget to look at is DisplayFeatureSubScreen. Documentation here. That's what causes the dialog to move between screens when the foldable is at an angle. The unfortunate thing here is it's not very customizable. If you want the dialog to show on the right screen instead, you can set the anchorPoint to Offset(double.maxFinite, 0). This tells the system to choose the screen on the right. The real kicker here is the system automatically forces the dialog in a screen. At the moment you can't override this behavior as far as I can tell.

Hope this helps save others time if you wonder why the dialogs and bottom sheets behave this way.