Repository navigation
Strange dialog behavior on foldable devices in half-fold mode #171448
Description
Steps to reproduce
- Open up a standard dialog or bottomsheet using
showDialog()orshowModalBottomSheet(). - Partially fold device so that it is in "half-fold" mode.
- Try both horizontal and vertical orientations of half-fold mode.
Expected results
Modal should stay in the same position as it is in the unfolded state. I still need to work with our UX team to determine the exact preferred behavior here, but at a minimum there should be a way to turn this behavior on or off.
Actual results
Modal position is changed based on the position and orientation of the fold.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(useMaterial3: true),
title: 'Flutter Demo',
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
floatingActionButton: FloatingActionButton(
onPressed:
() => showModalBottomSheet(
context: context,
builder:
(context) => Padding(
padding: const EdgeInsets.all(24),
child: Text('Bottom sheet'),
),
),
tooltip: 'Increment',
child: const Icon(Icons.add),
),
);
}
}Screenshots or Video
Screenshots / Video demonstration
Fully unfolded with a vertical fold orientation:
Half-folded with a vertical fold orientation:
Fully unfolded with a horizontal fold orientation:
Half-folded with a horizontal fold orientation:
Logs
Logs: N/A
Flutter Doctor output
Doctor output
[✓] Flutter (Channel REDACTED, on Debian GNU/Linux REDACTED, locale en_US.UTF-8) [1ms]
• Framework revision 75a77fec8c (13 days ago), 2025-06-18T00:00:00.000
• Engine revision 75a77fec8c
• Dart version b32559bca3
[✓] Android toolchain - develop for Android devices (Android SDK version Stable) [119ms]
• Android SDK at REDACTED
• Emulator version unknown
• Platform Stable, build-tools Stable
• Java binary at: REDACTED
This is the JDK bundled with the latest Android Studio installation on this machine.
To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment (build 21.0.6+-13368085-b895.109)
[!] Flutter IDE Support (No supported IDEs installed) [116ms]
• IntelliJ - https://www.jetbrains.com/idea/
• Android Studio - https://developer.android.com/studio/
• VS Code - https://code.visualstudio.com/
[✓] Connected device (2 available) [217ms]
• Pixel Fold (mobile) • REDACTED • android-arm64 • Android 16 (API 36)
• Linux (desktop) • linux • linux-x64 • Debian GNU/Linux REDACTED
Activity
math1man commentedon Jul 1, 2025
Oh, one other thing. I was also wonder how the Flutter framework configures this behavior. Is there a public API that apps could use to configure similar behavior if desired?
math1man commentedon Jul 1, 2025
Oh, yet another thing. I noticed that the transition between the unfolded and half-folded states has no animation. It seems like at the very least, Flutter should apply some sort of slide transition to move the modal between the two locations.
math1man commentedon Jul 8, 2025
Found out that this is based on https://api.flutter.dev/flutter/widgets/MediaQueryData/displayFeatures.html and https://api.flutter.dev/flutter/widgets/DisplayFeatureSubScreen-class.html. Both
showModalBottomSheet()andshowDialog()have ananchorPointargument that gets passed toDisplayFeatureSubScreento control which subscreen the modal will render on. However, there's still one feature gap. My team would like to be able to render a bottom sheet that spans both subscreens. It seems like there is currently no way to achieve this with theshowModalBottomSheet()method. I investigated copying theMediaQueryDatato remove theDisplayFeatures, but the context that the bottom sheet uses to obtain theDisplayFeaturescomes from theNavigator, so there's no way to remove them discriminately.math1man commentedon Jul 8, 2025
I also confirmed that changing this
Paddingwidget to anAnimatedPaddingwidget improves the transition, though there's still some animation jank due to changes to theSafeAreathat is applied directly in the bottom sheet logic.