Repository navigation
Modal bottom sheet is not dismissible when using FadeForwardsPageTransitionsBuilder #165681
Description
Steps to reproduce
- Show a bottom sheet using
showModalBottomSheet - Push a new route
- Pop the route
- Notice that the modal bottom sheet is not dismissible
Expected results
The bottom sheet should be dismissible.
Actual results
The bottom sheet is not dismissible.
Code sample
Code sample
import 'package:flutter/material.dart';
void main() => runApp(const App());
class App extends StatefulWidget {
const App({super.key});
@override
State<App> createState() => _AppState();
}
class _AppState extends State<App> {
bool useFadeTransition = false;
void togglePageTransitionType() {
setState(() {
useFadeTransition = !useFadeTransition;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
theme:
useFadeTransition
? ThemeData(
pageTransitionsTheme: PageTransitionsTheme(
builders:
Map<TargetPlatform, PageTransitionsBuilder>.fromIterable(
TargetPlatform.values,
value:
(_) => const FadeForwardsPageTransitionsBuilder(),
),
),
)
: null,
home: FirstPage(
useFadeTransition: useFadeTransition,
togglePageTransitionType: togglePageTransitionType,
),
);
}
}
class FirstPage extends StatelessWidget {
final bool useFadeTransition;
final VoidCallback togglePageTransitionType;
const FirstPage({
super.key,
required this.useFadeTransition,
required this.togglePageTransitionType,
});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('First Page')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Current Page Transition Type:\n${useFadeTransition ? 'FadeForwardsPageTransitionsBuilder' : 'Default (ZoomPageTransitionsBuilder)'}',
textAlign: TextAlign.center,
),
ElevatedButton(
onPressed: togglePageTransitionType,
child: Text('Toggle Page Transition Type'),
),
ElevatedButton(
child: Text('Open Modal BottomSheet'),
onPressed: () {
showModalBottomSheet(
context: context,
builder:
(context) => Container(
height: 200,
color: Colors.amber,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
const Text('Modal BottomSheet'),
ElevatedButton(
child: const Text('Second Page'),
onPressed:
() => Navigator.of(context).push(
MaterialPageRoute<SecondPage>(
builder:
(BuildContext context) =>
SecondPage(),
),
),
),
],
),
),
),
);
},
),
],
),
),
);
}
}
class SecondPage extends StatelessWidget {
const SecondPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(appBar: AppBar(title: Text('Second Page')));
}
}Video
Video demonstration
flutter-bug.webm
Flutter version
Flutter version
Flutter 3.31.0-0.1.pre
Activity
maheshj01 commentedon Mar 21, 2025
Reproducible on stable and the master channel. It looks like the bottomsheet is popped but the barrier is still present
On the master channel the bottom sheet is not dismissable, This is an issue when using
FadeForwardsPageTransitionsBuilderand works fine when using other transitionBuilders such asFadeUpwardsPageTransitionsBuilderScreen.Recording.2025-03-21.at.19.28.16.mov
Screen.Recording.2025-03-21.at.19.30.30.mov
Screen.Recording.2025-03-21.at.19.35.12.mov
minimal reproducible code
flutter doctor -v
MitchellGoodwin commentedon Apr 10, 2025
Testing on master I'm able to dismiss the bottom sheet by tapping the barrier after returning from a FadeForwardsPageTransitionBuilder.
Closing as fixed as a part of ##164675
github-actions commentedon Apr 25, 2025
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.